ページ・アイテムのチェックボックス・グループに含まれるチェックボックスが多数ある場合に、ファセット検索のファセットのように全て表示するか、少なく表示するか、切り替える方法を実装してみました。
以下より、実装を紹介します。
最初に実装に使用するチェックボックス・グループのページ・アイテムを作成します。
識別の名前としてP1_CB、タイプとしてチェックボックス・グループを選択します。動作を確認するために、LOVのタイプに静的値を選択し、静的値を５行ほど定義します。
すべてのチェックボックスを表示するボタンをB_SHOWとして作成します。
識別の名前はB_SHOW、ラベルはすべて表示とします。画面の表示はボタンではなくリンクとするため、外観のボタン・テンプレートとしてText、テンプレート・オプションを開いて、共通のStyleとしてDisplay as Linkを選択します。
動作のアクションとして動的アクションで定義を選択し、詳細の静的IDにB_SHOW、カスタム属性として以下を記載します。
data-action="#action$show-all?cb=P1_CB"
JavaScriptによる処理は、apex.actionsとして定義します。
同様に少なく表示するボタンも作成します。
識別のボタン名はB_HIDE、ラベルは少なく表示とします。詳細の静的IDとしてB_HIDE、カスタム属性として以下を記述します。
data-action="#action$hide-except?cb=P1_CB"
すべてのチェックボックスを表示するアクションはshow-all、少なく表示するアクションはhide-exceptとして定義します。
上記は、ページ・プロパティのJavaScriptのページ・ロード時に実行に記述します。また、ファンクションおよびグローバル変数の宣言に以下を記述します。
const TOP_N = 3;
apex.actions.invoke("hide-except", null, null, {cb:"P1_CB"});
外観のテンプレート・オプションのDeferred Page Renderingにチェックを入れることで、チェックボックスが少なく表示されてからページが表示されるようにします。
実装の紹介は以上です。
上記の実装にあたって、一点（おそらく不具合）問題がありました。
ボタンの表示/非表示を制御するため、ボタンに静的IDを指定しています。ですが、カスタム属性の指定に文字列としてidが含まれていると、ボタン要素のidが生成されません。
今回の例でいうと以下のカスタム属性であれば、<button id="B_SHOW" ...と生成されます。
data-action="#action$show-all?cb=P1_CB"
しかし、以下の場合<button id=""となり、静的IDが割り当たらないようです。
data-action="#action$show-all?id=P1_CB"
今回作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/checkbox-display-control.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
