Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Pleasanter

Pleasanter項目の活性制御のやり方について(スクリプト)

投稿日:2023年5月16日 更新日:

 

<目次>

(1) Pleasanter項目の活性制御のやり方について(スクリプト)
 (1-1) やりたいこと
 (1-2) 設定箇所
 (1-3) パターン①:ステータスに応じて「静的」に制御
 (1-4) パターン①:ステータスに応じて「静的」に制御
 (1-5) まとめ

(1) Pleasanter項目の活性制御のやり方について(スクリプト)

(1-1) やりたいこと

・Pleasanter項目の活性制御のやり方(スクリプトによる制御)を理解する。
・静的な制御(ステータスに応じて初期の活性制御をハンドリング)のやり方を理解する。
・動的な制御(ステータスを切り替えると、リアルタイムに活性制御も追従)のやり方を理解する。

目次にもどる

(1-2) 設定箇所

・Pleasanterの場合、「スクリプト」にカスタムのJavaScriptを記述して、フロントエンドを制御する事ができます。
(図110)
・設定画面内にスクリプトと適用範囲を入れるだけで、すぐに有効化できます。
(図111)
・普通に明細を作成/編集する分には「新規作成」と「編集」が付いていればOK。

目次にもどる

(1-3) パターン①:ステータスに応じて「静的」に制御

⇒ステータスに応じた、初期状態を制御する

(サンプルスクリプト)
$p.events.on_editor_load =  function () {
    console.log("活性制御テスト");
    switch($("#Issues_Status").val()) {
        // 未着手
        case '100':
            // 非活性
            $('#Issues_ClassA').prop('disabled', true).css('background-color','#5b5b5b');       
            break;
        // 準備中
        case '150':
            // 非活性
            $('#Issues_ClassB').prop('disabled', true).css('background-color','#5b5b5b');       
            break;
        // 実施中
        case '200':
            // 非活性
            $('#Issues_ClassC').prop('disabled', true).css('background-color','#5b5b5b');       
            break;
        // レビュー
        case '300':
            // 非活性
            $('#Issues_ClassD').prop('disabled', true).css('background-color','#5b5b5b');       
            break;
        // 完了
        case '900':
            // 非活性
            $('#Issues_ClassE').prop('disabled', true).css('background-color','#5b5b5b');       
            break;
        // 保留
        case '910':
            // 非活性
            $('#Issues_ClassF').prop('disabled', true).css('background-color','#5b5b5b');       
            break;
        default:
            break;
    }
}
(動画111)各ステータスの明細を開くと、該当の項目がグレーアウトされている

(補足)
・$p.events.on_editor_loadで「編集画面」を読み込んだときに実行するメソッドを定義しています。
(参考)開発者向け機能:スクリプト:$p.events.on_editor_load

目次にもどる

(1-4) パターン②:ステータスに応じて「静的」に制御

⇒プルダウンに応じてリアルタイムに制御する

(サンプルスクリプト)

$(document).on('change', '#Issues_Status', function () {
    console.log("活性制御テスト");
    switch($("#Issues_Status").val()) {
        // 未着手
        case '100':
            // 非活性
            $('#Issues_ClassA').prop('disabled', true).css('background-color','#5b5b5b');   
            $('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');          
            $('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');  
            break;
        // 準備中
        case '150':
            // 非活性
            $('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassB').prop('disabled', true).css('background-color','#5b5b5b');           
            $('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');      
            break;
        // 実施中
        case '200':
            // 非活性
            $('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');          
            $('#Issues_ClassC').prop('disabled', true).css('background-color','#5b5b5b');   
            $('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');      
            break;
        // レビュー
        case '300':
            // 非活性
            $('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');          
            $('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassD').prop('disabled', true).css('background-color','#5b5b5b');   
            $('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');  
            break;
        // 完了
        case '900':
            // 非活性
            $('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');          
            $('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassE').prop('disabled', true).css('background-color','#5b5b5b');   
            $('#Issues_ClassF').prop('disabled', false).css('background-color','#ffffff');          
            break;
        // 保留
        case '910':
            // 非活性
            $('#Issues_ClassA').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassB').prop('disabled', false).css('background-color','#ffffff');          
            $('#Issues_ClassC').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassD').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');  
            $('#Issues_ClassF').prop('disabled', true).css('background-color','#5b5b5b');           
            break;
        default:
            break;
    }
})

 

(動画121)明細編集時に項目を選択すると、それに応じた活性制御が動的に追従する

(補足)
・動的に切り替える時は、各パターンでIssues_ClassA~Fまで全部について、制御を明記する必要があります。
・そうしないと、グレーアウトがどんどん累積していったりします(動的に切り替わらない)
・よって、ステータス単位で活性にする項目は、色をffffffに明示的に指定する必要あり

目次にもどる

(1-5) まとめ

・非活性(例)

$('#Issues_ClassF').prop('disabled', true).css('background-color','#5b5b5b');

・活性(例)

$('#Issues_ClassE').prop('disabled', false).css('background-color','#ffffff');

・動的制御

$(document).on('change', '[制御に使う項目]', function () { //制御処理 }

・(参考)項目の非表示

$('#Issues_ClassF').css('display','none');
・(参考)項目の再表示
$('#Issues_ClassF').css('display','');   

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-Pleasanter
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Pleasanterでcssを設定する方法

  <目次> (1) Pleasanterでcssを設定する方法  やりたいこと  設定箇所  サンプルcssコード  適用結果 (1) Pleasanterでcssを設定する方法 やりたい …

PleasanterのAPIをPythonからコールするサンプルをご紹介

  <目次> (1) PleasanterのAPIをPythonからコールするサンプルをご紹介  (1-0) やりたいこと  (1-1) サンプルサイト  (1-2) サンプルプログラム   …

PleasanterのAPIの使い方&レコード作成の例をご紹介

  <目次> (1) PleasanterのAPIの使い方&レコード作成の例をご紹介  やりたいこと  (1-0) 概要  (1-1) STEP1:テスト用サイトのインポート  (1-2) …

プリザンター(Pleasanter)でワークフローを試作してみた

  <目次> (1) プリザンター(Pleasanter)でワークフローを試作してみた。  (1-0) 概要  (1-1) STEP1:フロントエンド開発①(画面項目定義)  (1-2) S …

  • English (United States)
  • 日本語
Top