【pleasanter】スクリプト～セクションの表示・非表示～ユーザー組織あたりをあれこれやってみたシリーズ⑥

ユーザー組織あたりをあれこれやってみたシリーズ。前回は、ユーザーにより項目の編集可否を切り替える、というのをやりました。
【pleasanter】スクリプト～ユーザーにより項目の編集可否を切り替える～ユーザー組織あたりをあれこれやってみたシリーズ⑤

今回も、ユーザー、組織、グループに関連するところの「スクリプト」をやってみようと思います。

特定の部署だけこの入力欄が必要で、ほかの部署にはさわってほしくない、見てほしくないとうようなケースがあると思います。
その部分を「〇〇部使用欄」というセクションでくくって、特定の部署だけにみせたらよいのでは！と思って、それをやってみようと思います。

今回は
・セクションの表示・非表示を切り替える
・スクリプトでスタイル（ｃｓｓ）を動的に切り替える
というところを学習しました。

※おことわり
2023年11月時点の情報です。プリザンターのバージョンは 1.3.20.0 です。Google Chrome でやっています。
javascript,html,cssともに初心者です。調べながら、やってみながら、きっとこうすればいいんだ！という感じで書いていますので、間違っている場合、効率的な書き方ではない可能性が大いにあります。間違ってるよ！とか、こうしたほうがいいよ！ということがありましたら、コメント等で教えていただけると大変ありがたいです。

１．経理部所属のユーザーの場合セクションを開き、それ以外のユーザーの場合セクションを閉じる
２．セクションごと存在をなくす
３．最後に
４.参考文献、記事

１．経理部所属のユーザーの場合セクションを開き、それ以外のユーザーの場合セクションを閉じる

（１）やりたいこと

組織IDが経理部（ID5）の場合、セクションを開き、経理部以外の場合セクションは閉じる

経理部だけが操作してよい項目をセクション内に設置し、経理部の人が開いた時だけそのセクションが開かれる。

（２）テーブルの設定

担当者：選択肢一覧[[Users]]、規定値[[Self]]

分類A：表示名「部署」、選択肢一覧[[Depts]]、規定値[[Self]]

セクション：表示名「経理部使用欄」、セクションの折り畳みを許可、設定の表示「開く」
セクション(見出し）を設定するには、エディタで「選択肢一覧：から「その他」を選択肢、「見出し」を有効化します。
有効化した見出しを選択して「詳細設定」で表示名等を変更します。

分類B、説明Aをセクション「経理部使用欄」の下に設定します。
この二つの項目は経理部のみ使用する目的です。

その下にまたセクションを入れます。
表示名は「プリザンター情報」とします。

セクションを２つ入れました。一つ目のセクションを経理部だけに開きたい。
一つ目のセクションは表示名を「経理部使用欄」として、「セクションの折りたたみを許可」にチェックを入れました。
「セクションの折りたたみを許可」にチェックを入れることでここから下、次のセクションまでの項目がひとカタマリのブロック（？）となり、セクション見出しをクリックすることで閉じたり開いたりします。
「セクションの折りたたみを許可」にチェックを入れない場合、セクションはただの線（？）見出し（？）となり、閉じたり開いたりはしません。

なお、セクションの詳細設定画面でセクションのIDを確認しておきます。このIDをスクリプトで要素をつかむときに利用します。今回、操作したいセクションのIDは「4」ですね。

（３）コード

スクリプトに以下のコードを入力します。
出力先は「新規作成」と「編集」です。
操作したいセクションはIDが4なので、SectionFields4として指定します。

$p.events.on_editor_load = function () {
    const deptId = $p.deptId();
    //ログインユーザーが経理部(deptId:5)の場合のみ、セクション内を開示する
    if ( deptId !== 5 ) {
        $('#SectionFields4').css("display","none");
        $('label[for="SectionFields4"]').prop('disabled',true);
    } 
}

（４）編集画面の動き

経理部の加藤さんがログインして「新規作成」した場合：「経理部使用欄」以下の項目が表示されています。

開発部の岡田さんがログインして「新規作成」した場合：「経理部使用欄」以下の項目は閉じており表示されない。見出し部分をクリックしても開かない。

（５）コードの解説

const deptId = $p.deptId();

$p.deptId() にてログインユーザーの組織IDを取得し、変数 deptId に代入しています。

if ( deptId !== 5 ) { ここに条件がtrueの時の処理 }

条件は deptId !== 5 つまり、deptId(ログインユーザーの組織ID）が 5 に等しくない場合、後続の｛｝内の処理が実行されます。
総務部の加藤さんの場合は、｛｝内の処理は実行されません。
開発部の岡田さんの場合は、｛｝内の処理が実行されます。

$(‘#SectionFields4’).css(“display”,”none”);

jQueryの書き方です。
要素.css(属性,属性値)　とすることで、指定した要素のスタイルを変更できます。
div id=”SectionFields4″ を非表示にしています。#id名と書くことで要素を指定しています。
スタイルに display:none を追加することで非表示を実現しています。
div id=”SectionFields4″ に囲まれた中に分類B、説明Aは包まれているため、丸っと非表示になります。開発者用ツールで見てみるとわかりやすいかと。
ちなみに「経理部使用欄」と表示しているラベルの部分は非表示になっていないので、セクションの見出し自体は見えるんですね。

$(‘label[for=”SectionFields4″]’).prop(‘disabled’,true);

この部分は、これを入れないと、見出しをクリックすると開いてしまったので、適当に書いて追加してみたらクリックしても開かなくなったので、これでいいかと。

２．セクションごと存在をなくす

2024.2.4.コードに冗長な部分があったため、内容を修正しています。

（１）コード

$p.events.on_editor_load = function () {
    const deptId = $p.deptId();
    //ログインユーザーが経理部(deptId:5)の場合のみ、「経理部使用欄」セクションを表示する
    if ( deptId !== 5 ) {
        $('#SectionFields4Container').css("display","none");
    } 
}