Pleasanterの拡張フィールドを使おう～スクリプト連携編～

はじめに

Plesanterには様々な機能がありますが、あまりに機能が豊富すぎるため、すべての機能を使いこなしている方はほとんどいないでしょう。場合によっては、存在すら知らなかったという機能も少なくないように思います。
中でも「拡張フィールド」という機能はほとんど使われていないのではないでしょうか？
軽く検索してみたところ、拡張フィールドについての記事はほとんどありませんでした。
こちら非常に便利な機能なのですが、使われていないのはもったいない！と思い記事を書くことにいたしました。

拡張フィールドとは

ユーザが設定できるフィルタの拡張版で、標準機能には存在しない任意の入力フィールドを画面上に配置することができる機能です。
拡張フィールド自体は自由に入力できる項目、というだけなので単体ではほぼ意味がありません。よってこの機能は前提としてスクリプト、サーバスクリプト、拡張SQLなどと組み合わせて使っていくことになります。このあたりのハードルの高さも、あまりこの機能が使われていない理由の一つかもしれません。
今回はスクリプトとの連携に絞って、使用例を紹介させていただこうと思います。

拡張フィールドとスクリプト

拡張フィールドの強みは、自由に入力や選択ができるフィールドを配置できることにあります。
たとえば拡張フィールドとスクリプトを組み合わせれば、動的にスクリプトを起動させることが可能です。

Pleasanterをお使いの皆様の中には、スタイルを使って「状況」による色分けをしている方などもいらっしゃるかと思います。
下図は、状況が「未」の項目の背景を赤くし、文字を白くしたところです。

スタイルは以下の通りです。

tr:has(.status-new){
  background-color: red;
}
tr:has(.status-new) td{
  color: white;
}

しかし背景色を切り替えているとものによっては見づらいので一時的にOFFにしたり、背景色を変えたりしたいことがあるかもしれません。今回は、選択式の拡張フィールドを作成し、その値によって背景色をOFFにする処理を実装してみましょう。

背景のON/OFF切替

まずは、以下の内容のJsonファイルを
.¥Pleasanter¥App_Data¥Parameters¥ExtendedFields¥配下に配置します。
ファイル名は任意ですが、今回はBackgroundField.jsonとしました。

BackgroundField.json

{
    "Name": "BackgroundField",
    "SiteIdList": [55432],
    "FieldType": "ViewExtensions",
    "TypeName": "nvarchar",
    "LabelText": "背景色",
    "ChoicesText": "ON\nOFF",
    "DefaultInput": "ON",
    "ControlType": "ChoicesText"
}

• Nameには任意の名前を設定します
  • 今回はBackgroundFieldとしました
• SiteIdListには適応する(拡張フィールドを配置する)SiteIdを列挙します
• FieldTypeで配置位置を指定できます
  • スクリプト連携の場合はFilterよりViewExtensionsにしてフィルタ外に配置するほうが使い勝手が良いと思います
• TypeNameで追加する項目のデータ型を指定します
• LabelTextで項目のラベルを指定します
• ChoicesTextには分類項目の選択し一覧を指定します
  • ControlTypeをChoicesTextにしているときのみ有効になります
• DefaultInputで項目の規定値を指定します
• ControlTypeでコントロール種別を指定します
  • 今回はセレクトボックスなのでChoicesTextを指定します

スタイル

スクリプトで直接色を付けても良いですが、せっかくなのでクラスを付与してスタイルで背景色を変更する形式にしてみましょう。

tr:has(.backgroundEnhancement){
  background-color: red;
}
tr:has(.backgroundEnhancement) td{
  color: white;
}

先ほどのスクリプトのクラス名を付与する予定のく書き換えました。

スクリプト

$(document).ready(() => {
    $('.status-new').removeClass('noEnhancement').addClass('backgroundEnhancement');
    $('#ViewExtensions__BackgroundField').on('change',(event) => {
        switch(event.target.value){
            case 'ON':
                $('.status-new').removeClass('noEnhancement').addClass('backgroundEnhancement');
                break;
            case 'OFF':
                $('.status-new').removeClass('backgroundEnhancement').addClass('noEnhancement');
                break;
        }
    });
});

• 出力先のチェックボックスは「一覧」のみで大丈夫です
• 拡張フィールドのIDはViewExtensions__ + Jsonファイルで指定したNameになります

いかがでしょうか？
背景色を「OFF」に切り替えると背景色が適応されなくなるようになったかと思います。

まとめ

今回は、拡張フィールドとスクリプトを連携して背景色を切り替える方法をまとめました。これ以外にも背景色を変更したり、文字サイズを変更する、他にもフィルタをまとめて変更するなどという使い方も可能です。
一覧画面を自由に操作する方法は少ないので、使いこなせると便利になると思います。ぜひいろいろ試してみてください！

次回の記事では、拡張フィールドとサーバスクリプトを連携させる方法をご紹介します。