チェックボックスの表示数を制御する

 ページ・アイテムのチェックボックス・グループに含まれるチェックボックスが多数ある場合に、ファセット検索のファセットのように全て表示するか、少なく表示するか、切り替える方法を実装してみました。

以下より、実装を紹介します。

最初に実装に使用するチェックボックス・グループのページ・アイテムを作成します。

識別の名前として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として定義します。

	apex.actions.add([
	{
	// show all checkboxs in the page item "cbid"
	name: "show-all",
	action: function( event, element, args ) {
	$x_Show("B_HIDE");
	$x_Hide("B_SHOW");
	let allCheckboxes = document.getElementsByName(args.cb);
	allCheckboxes.forEach( (e) => {
	// console.log(e);
	$x_Show(e);
	});
	}
	},
	{
	// hide all checkboxes except top 2.
	name: "hide-except",
	action: function( event, element, args ) {
	$x_Hide("B_HIDE");
	$x_Show("B_SHOW");
	let i = 0;
	let allCheckboxes = document.getElementsByName(args.cb);
	allCheckboxes.forEach( (e) => {
	if ( ++i > TOP_N ) {
	// console.log(e);
	$x_Hide(e);
	}
	});
	}
	}
	]);
	// 最初は非表示。
	apex.actions.invoke("hide-except", null, null, {cb:"P1_CB"});

view raw checkbox-display-control.js hosted with ❤ by GitHub

上記は、ページ・プロパティの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のアプリケーション作成の参考になれば幸いです。

完