【pleasanter】リンクとルックアップ⑤ColumnFilterExpressions～動的な選択肢の絞り込み～

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

１．はじめに
２．ColumnFilterExpressions 設定の仕方
３．やってみる（普通のテーブル）
４．やってみる（Users,Depts,Groups）
５．ちょっと複雑な例
- 例１）２つの項目で絞り込み
- 例２）動的な指定と固定値の指定を同時に行う
５.ColumnFilterExpressionsの強み
１０.参考記事

１．はじめに

プリザンターリンクとルックアップシリーズ。前回は項目連携をやりました。
今回は選択肢を他の項目の値で絞り込みして表示する、というのをやってみたいと思います。

あれ？項目連携と同じじゃない？ColumnFilterHashと何が違うの？と思ったそこのあなた！
項目連携とちょっと違うんです。項目連携よりちょっとだけとっつきにくい印象です。ですが、より柔軟な設定をすることが可能です！
ColumnFilterHashとちょっと違うんです。ColumnFilterHash は定数（きまったべた打ちの値）で絞り込みしますが、ColumnFilterExpressions は画面上の別の項目の値で動的に絞り込みをします。

公式マニュアル
テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：フィルタ（選択肢一覧を他の項目の値で絞り込む）

２．ColumnFilterExpressions 設定の仕方

分類項目、担当者項目、管理者項目で設定できます。

ColumnFilterHash の時と同様に、エディタの項目の詳細設定の選択肢一覧でJSON形式で設定します。
自動ポストバックをオンにすると、即座に絞り込みが行われます。

一例です。
サイトID8936 のテーブルをリンクさせている項目の選択肢一覧に指定します。
サイトID8936 のテーブルの [説明A] が、このテーブルの [分類A] と等しい（もしくは含む）レコードのタイトルを選択肢として表示します。

[
    {
        "SiteId": 8936,
        "View": {
            "ColumnFilterExpressions" : {
                "DescriptionA":"[ClassA]"
            }
        }
    }
]

以下、公式より引用させていただきました。
テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：フィルタ（選択肢一覧を他の項目の値で絞り込む）

選択肢一覧にColumnFilterExpressionsを指定することで、選択肢一覧を他の項目の値で絞り込むことができます。
エディタタブの分類項目、管理者、担当者で指定できます。
注意事項：複数選択機能を利用している場合は使用できません。

ColumnFilterExpressionsの指定方法

式の種類記述例説明
表示名でフィルタ [ClassA] 指定する項目の選択肢一覧を値と表示名で設定していた場合、項目の表示名でフィルタします。JSON配列に変換を行ってフィルタします。
値でフィルタ [@ClassA] 指定する項目の選択肢一覧を値と表示名で設定していた場合、項目の「値」でフィルタします。JSON配列に変換を行ってフィルタします。
値でそのままフィルタ =[@ClassA] JSON配列に変換を行わずに項目の値でフィルタします。フィルタに指定する項目の値を完全一致させたい場合に利用します。

※選択肢一覧が未設定（自由入力）または選択肢一覧が値のみの場合は、式の種類がいずれの場合でも項目の「値」でフィルタします。

引用元：テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：フィルタ（選択肢一覧を他の項目の値で絞り込む）

式の種類	記述例	説明
表示名でフィルタ	[ClassA]	指定する項目の選択肢一覧を値と表示名で設定していた場合、項目の表示名でフィルタします。JSON配列に変換を行ってフィルタします。
値でフィルタ	[@ClassA]	指定する項目の選択肢一覧を値と表示名で設定していた場合、項目の「値」でフィルタします。JSON配列に変換を行ってフィルタします。
値でそのままフィルタ	=[@ClassA]	JSON配列に変換を行わずに項目の値でフィルタします。フィルタに指定する項目の値を完全一致させたい場合に利用します。

この三種類の使い分けがわからなかったのですが、次の項目で例示とともに理解を進めたいと思います。

３．やってみる（普通のテーブル）

※「子テーブル」は ColumnFilterExpressions を指定する方のテーブルを指します。

例	詳細	指定方法	子テーブル※
例１：文字列でフィルタ	親テーブル：文字列子テーブル：文字列	“DescriptionA”:”[ClassA]”	自由入力
例２：表示名でフィルタ	親テーブル：文字列子テーブル：選択肢（値,表示名）	“DescriptionA”:”[ClassA]”	10,犬 20,猫値,表示名の項目を「犬」「猫」等の表示名でフィルタ
例３：選択肢を文字列でフィルタ	親テーブル：選択肢（表示名のみ）子テーブル：文字列	“ClassA”:”[ClassX]”	自由入力
例４：値でフィルタ	親テーブル：選択肢（値,表示名）子テーブル：選択肢（値,表示名）	“ClassA”:”[@ClassX]”	10,犬 20,猫値,表示名の項目を、「10」「20」等の値でフィルタ
例５：複数選択でフィルタ	親テーブル：選択肢（値,表示名）子テーブル：選択肢（値,表示名）複数選択	“ClassA”:”=[@ClassX]”	10,犬 20,猫複数選択と可としてる。値,表示名の10,20の値でフィルタ。複数の選択肢でフィルタが可能。

例１：文字列でフィルタ（親テーブル：文字列、子テーブル：文字列）

やりたいこと

分類Aに対象動物を入力 ⇒ 分類Bに入力した対象動物の[商品名]が選択肢として表示される。

“DescriptionA”:”[ClassA]”
のように、指定します。

親テーブル：商品一覧

項目	表示名	備考
タイトル	商品名
説明A	利用対象	利用対象の動物名を自由入力

子テーブル：選択フィルタテスト

項目名	表示名	備考
分類A	分類A	対象動物を入力する。自動ポストバックON
分類B	分類B	[商品一覧]テーブルをリンク。分類Aの入力内容で絞り込み表示

分類Bの選択肢一覧のJSON

[
    {
        "SiteId": 8936,
        "View": {
            "ColumnFilterExpressions" : {
                "DescriptionA":"[ClassA]"
            }
        }
    }
]

結果

分類Aに「鳥」と入力すると、[商品一覧] テーブルの「利用対象」が「鳥」のアイテムが選択肢に表示されます。
分類Aに「犬猫」と入力すると、[商品一覧] テーブルの「利用対象」が「犬猫」のアイテムが選択肢に表示されます。
分類Aに「犬」と入力すると、[商品一覧] テーブルの「利用対象」が「犬」および「犬猫」のアイテムが選択肢に表示されます。
部分一致ですね。

例２：表示名でフィルタ（親テーブル：文字列、子テーブル：選択肢（値,表示名））

ちょっとわかりくいですよね。。。

分類Aを値と表示名の選択肢にした場合。マスタテーブルで検索する項目は文字列のため、表示名で検索したい！というときです。

“DescriptionA”:”[ClassA]”
のように、指定します。

分類Aの選択肢一覧を以下のように設定します。

10,犬
20,猫
30,亀

分類Aは自動ポストバックONにしています。

分類Bの選択肢一覧のJSONを以下の設定とします。（（１）と変わらずです）

[
    {
        "SiteId": 8936,
        "View": {
            "ColumnFilterExpressions" : {
                "DescriptionA":"[ClassA]"
            }
        }
    }
]

値ではなく、表示名でフィルタしてくれることが確認できました。

例３：選択肢を文字列でフィルタ（親テーブル：選択肢（表示名のみ）、子テーブル：文字列）

今度は、親テーブル[商品一覧]に分類項目で「カテゴリ」を設定し、表示名のみの選択肢とします。

親テーブル：商品一覧

項目	表示名	備考
タイトル	商品名
分類A	カテゴリ	値なし、表示名のみの選択肢を設定

子テーブル、文字列入力の値で絞り込みする場合

“ClassA”:”[ClassX]”
のように、指定します。

一部の入力のみで絞り込みすることもできます。

子テーブル：選択フィルタテスト

項目名	表示名	備考
分類X	分類X	対象動物を入力する。自由入力。自動ポストバックON
分類B	分類B	[商品一覧]テーブルをリンク。分類Xの入力内容で絞り込み表示

分類Bの選択肢一覧のJSON

[
    {
        "SiteId": 8936,
        "View": {
            "ColumnFilterExpressions" : {
                "ClassA":"[ClassX]"
            }
        }
    }
]

結果

分類Xに「犬用」と入力すると、カテゴリが「犬用」の商品名が表示されました。
なお、「犬」とだけ入れても同様の結果が得られました。

子テーブル、選択肢の値で絞り込みする場合

分類Xにも親テーブル[商品一覧]のカテゴリと同様に、選択肢を設定します。

結果としては、

“ClassA”:”[ClassX]”
としても、
“ClassA”:”[@ClassX]”
としても、どちらでも行けました。

例４：値でフィルタ（親テーブル：選択肢（値,表示名）、子テーブル：選択肢（値,表示名））

さらに、[商品一覧]に分類項目の「カテゴリ」を値,表示名の設定に変更しました。

値で選択する場合は
“ClassA”:”[@ClassX]”
のように、@をつけて指定します。

親テーブル：商品一覧

項目	表示名	備考
タイトル	商品名
分類A	カテゴリ	値,表示名の選択肢を設定

子テーブル：

子テーブルの分類Xも同様に値,表示名の設定とします。

項目名	表示名	備考
分類X	分類X	値,表示名の選択肢を設定。自動ポストバックON
分類B	分類B	[商品一覧]テーブルをリンク。分類Xの選択肢の値で絞り込み表示

分類BのJSON

[
    {
        "SiteId": 8936,
        "View": {
            "ColumnFilterExpressions" : {
                "ClassA":"[@ClassX]"
            }
        }
    }
]

（１）（２）と違うのは、”ClassA”:”[@ClassX]” の部分に @ をつけています。
絞り込み項目を[値,表示名]としている場合、「値」で絞り込みを行います。
「値」で絞り込みを行うには @ をつけて、”[@ClassX]” のように指定します。
“[@ClassX]” とすることで、「値」で親テーブルの[カテゴリ]を検索します。

例５：複数選択でフィルタ（親テーブル：選択肢（値,表示名）、子テーブル：選択肢（値,表示名）複数選択）

複数選択の値でフィルタをかける場合、以下のようにします。

“ClassA”:”=[@ClassX]”

親テーブル：商品一覧は例4と同じ、分類A「カテゴリ」は値,表示名としています。

子テーブル：子テーブルの分類Xも同様に値,表示名の設定とし、「複数選択」のチェックをオンにします。

分類BのJSON

[
    {
        "SiteId": 8936,
        "View": {
            "ColumnFilterExpressions" : {
                "ClassA":"=[@ClassX]"
            }
        }
    }
]

結果：犬用、猫用を同時選択すると、犬用、猫用の商品が選択肢に表示されました！

以下、JSON配列にするとかしないとか書いてあるのが気になったので、たぶんこうだろうなという補足です。

公式サイトの説明に
[@ClassA] と指定すると、JSON配列に変換を行ってフィルタする。
=[@ClassA] と指定すると、JSON配列に変換を行ってフィルタする。

とあります。

たぶん、以下のイメージだと思われます。

プリザンターが自動でJSON配列に変換する
⇒ 10 を指定すると [10] のように変換される。
⇒ 10,20 を指定すると [10,20] のように変換される。

複数選択可としている場合、選択した時点で [10,20] のような形となっている。
そのため、これをJSON配列化すると二重でJSON配列になってしまう。たぶんこんな感じ [[10,20]]
なので、自動でJSON配列化しないでほしいときは =[@ClassA] と指定すると、よい、ということですかね。

４．やってみる（Users,Depts,Groups）

項目連携ではできませんが、ColumnFilterExpressions では Users,Depts,Groups の特殊テーブルでも使用できます。
普通のテーブルの場合と大きく違うところは、”SiteId” のところが ”TableName” となるところです。

例１）指定した部署のユーザーを選択肢に表示する

分類Aで指定した部署のユーザーを選択肢に表示する、という指定例です。
よくあるパターンです。

[
    {
        "TableName": "Users",
        "View": {
                "ColumnFilterExpressions": {
                    "DeptId": "[@ClassA]"
                }
        }
    }
]

例２）指定したグループのユーザーを選択肢に表示する

Aプロジェクトグループ、Bプロジェクトグループと、グループを２つ登録しています。

分類Aで指定したグループのユーザーを分類Bの選択肢に表示する例です。

①サイトのアクセス制御にAプロジェクトグループと、Bプロジェクトグループを登録しておく。
②分類Aの選択肢一覧に [[Groups]] と入力。
※[[Groups*]] と指定する場合は、①の設定は不要です。
③分類Bの選択肢一覧に、以下のコードを入力。

[
    {
        "TableName": "Users",
        "View": {
                "ColumnFilterExpressions": {
                    "Groups": "[@ClassA]"
                }
            }
    }
]

分類Aでグループを指定します。すると、分類Bに指定したグループに登録されているユーザーが選択肢として表示されます。

例３）指定したグループの部署を選択肢に表示する

支店グループ、本部グループと、2つのグループを登録してあります。
メンバーは、管理者を除き組織単位で指定しています。

分類Aで指定したグループの組織を分類Bの選択肢に表示する例です。

①サイトのアクセス制御に支店グループと、本部グループを登録しておく。
②分類Aの選択肢一覧に [[Groups]] と入力。
※[[Groups*]] と指定する場合は、①の設定は不要です。
③分類Bの選択肢一覧に、以下のコードを入力。
　例２と違う個所は TableName に Depts を指定しているところです。

[
    {
        "TableName": "Depts",
        "View": {
                "ColumnFilterExpressions": {
                    "Groups": "[@ClassA]"
                }
            }
    }
]

分類Aでグループを指定します。すると、分類Bに指定したグループに登録されているユーザーが選択肢として表示されます。

なお、TableName に Users を指定すると、指定したグループに登録された組織に所属するユーザーが選択肢に表示されます。

例４）ログインユーザーの部署に所属するユーザーを選択肢に表示する

2段階で。
①分類Aにログインユーザーの部署が指定されるように設定します。（選択肢に[[Depts]]、規定値に[[Self]]）
②分類Bに以下のコードを登録します。
分類Aで指定された組織のユーザーを選択肢として表示する、という設定です。
よくあるパターンです。

[
    {
        "TableName": "Users",
        "View": {
                "ColumnFilterExpressions": {
                    "DeptId": "[@ClassA]"
                }
            }
    }
]

営業部の田中さんでログインした際の画面です。営業部に所属する人が分類Bの選択肢に表示されます。

５．ちょっと複雑な例

ちょっと複雑な例をやってみます。

例１）２つの項目で絞り込み

親テーブル「タスク一覧」を用意します。

子テーブルでは [分類A] で担当者を指定、[分類B] にプロジェクト名を入力し、[分類C] に親テーブルタスク一覧から二つの項目で絞り込みしたタスク名を選択肢として表示します。

分類Cの選択肢一覧には以下のコードを設定します。

[
    {
        "SiteId": 8954,
        "View": {
            "ColumnFilterExpressions": {
                "Owner": "[@ClassA]",
                "DescriptionA": "[ClassB]"
            }
        }
    }
]

「担当者」（分類A）を指定し、「プロジェクト名」（分類B）を入力すると、親テーブルから絞り込みされたタスク名が「タスク」（分類C）に表示されます。

例２）動的な指定と固定値の指定を同時に行う

親テーブル「学部学科マスタ」を用意します。

子テーブル
分類A「大学」、分類B「各部」は親テーブルと同様の選択肢をセットし、複数選択可とします。
分類C「学科」の選択肢一覧に以下のコードを入力します。
大学、学部で親テーブルを絞り込みし、さらに「状況」を100,有効のみの絞り込みを行っています。

[
    {
        "SiteId": 8961,
        "View": {
            "ColumnFilterExpressions": {
                "ClassA": "=[@ClassA]",
                "ClassB": "=[@ClassB]"
            },
            "ColumnFilterHash": {
                "Status": "100"
            }
        }
    }
]

結果イメージ