オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

同じ処理をスクリプトとサーバスクリプトで書き比べてみる。

こんにちは。
リーデックス野田です。

 

最近YouTubeでダイエット動画をよく見ているのですが、朝に白湯を飲むと良いらいしいです。実践してみようと思っています。

 

さて 今回は、スクリプトとサーバスクリプトの書き比べをしてみようと思います。同じ処理をサーバスクリプトとスクリプトで記載してみて、書き方にどのような違いがでるのかをみていきたいと思います。初めての方にも理解していただけるよう、わかりやすく解説していきたいと思いますので、ぜひご覧ください。 

 

 

 

 

お題について

分類Aの選択肢の値に応じて、動的に分類Bの項目を非表示にしてみようと思います。

今回は、分類Aの値が1の場合に、分類Bの項目を非表示にしてみます。

 

f:id:nodakoshiro:20210516104620p:plain

 

スクリプトで記載してみる

スクリプトは、jQueryを使用して記載しています。特にプリザンター独自の関数などは使用していません。

 

今回、下記のコードを記載しました。

非活性化することを明示的にわかるようにするために、「css('background', '#f5f5f5')」の処理を追加しています。

$('#Results_ClassA').change(function() {
    if($('#Results_ClassA').val() === '1'){
        $('#Results_ClassB').prop('disabled'true);
        $('#Results_ClassB').css('background''#f5f5f5');
    } else {
        $('#Results_ClassB').prop('disabled'false);
        $('#Results_ClassB').css('background''');
    }
});

 

サーバサスクリプトで記載してみる

サーバスクリプトでは、columnsオブジェクトのプロパティであるReadOnlyを使用して制御することが可能です。

 

開発者向け機能:サーバスクリプト機能:columnsオブジェクト | Pleasanter

 

まずは、分類Aのセレクトボックスを選択したタイミングでサーバスクリプトを実行したいので、分類Aに自動ポストバックの設定を追加します。

 

f:id:nodakoshiro:20210516111334p:plain

 

サーバスクリプトは下記のコードを記載します。条件は「画面表示の前」を選択してください。

try{
    if(model.ClassA === '1'){
        columns.ClassB.ReadOnly = true;
    } else {
        columns.ClassB.ReadOnly = false;
    }
catch (e){
    Context.Log(e.stack);
}

 

 

まとめ

今回はスクリプトとサーバスクリプトの比較をしてみました。今後も、少しづつプリザンターに関するお役立ち情報を発信できればと思います。

弊社では、スクリプトやスタイルを利用したカスタマイズについてご支援させていただいております。スクリプトについて相談したい、業務を改善のために実現したい機能がある、や、本記事や過去の記事のスクリプトを応用したい、などありましたら、お気軽にお問合せください。
それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。