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

＜目次＞

(１) Pleasanter項目の活性制御のやり方について（スクリプト）
　(１-１) やりたいこと
　 (１-２) 設定箇所
　 (１-３) パターン①：ステータスに応じて「静的」に制御
　 (１-４) パターン①：ステータスに応じて「静的」に制御
　 (１-５) まとめ

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

(１-１) やりたいこと

・Pleasanter項目の活性制御のやり方（スクリプトによる制御）を理解する。

・静的な制御（ステータスに応じて初期の活性制御をハンドリング）のやり方を理解する。

・動的な制御（ステータスを切り替えると、リアルタイムに活性制御も追従）のやり方を理解する。

＞目次にもどる

(１-２) 設定箇所

・Pleasanterの場合、「スクリプト」にカスタムのJavaScriptを記述して、フロントエンドを制御する事ができます。

（図１１０）

↓

・設定画面内にスクリプトと適用範囲を入れるだけで、すぐに有効化できます。

（図１１１）

↓

・普通に明細を作成／編集する分には「新規作成」と「編集」が付いていればOK。

＞目次にもどる

(１-３) パターン①：ステータスに応じて「静的」に制御

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

（サンプルスクリプト）

$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;
    }
}

（動画１１１）各ステータスの明細を開くと、該当の項目がグレーアウトされている

動画プレーヤー

Media error: Format(s) not supported or source(s) not found

ファイルをダウンロード: https://rainbow-engine.com/wp-content/uploads/2023/05/RP-IT0724_Pleasanter_Field_Grayout_Script/RP-IT0724_111_bandicam-2023-01-16-19-58-47-982.mp4?_=1

00:00

ボリューム調節には上下矢印キーを使ってください。

（補足）

・$p.events.on_editor_loadで「編集画面」を読み込んだときに実行するメソッドを定義しています。

（参考）開発者向け機能：スクリプト：$p.events.on_editor_load

https://pleasanter.org/manual/script-events-on-editor-load

＞目次にもどる

(１-４) パターン②：ステータスに応じて「静的」に制御

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

（サンプルスクリプト）

$(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;
    }
})

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

動画プレーヤー

Media error: Format(s) not supported or source(s) not found

ファイルをダウンロード: https://rainbow-engine.com/wp-content/uploads/2023/05/RP-IT0724_Pleasanter_Field_Grayout_Script/RP-IT0724_121_bandicam-2023-01-16-20-33-58-037.mp4?_=2

00:00

ボリューム調節には上下矢印キーを使ってください。

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

＞目次にもどる

(１-５) まとめ

・非活性（例）

$('#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','');

＞目次にもどる