リスト・リージョン上のアイテムをクリックして選択する

リスト・リージョンに表示されているリスト・アイテムをクリックして、そのアイテムが選択されたように見せる実装をしてみました。また、タイプがラジオ・グループのページ・アイテムをボタンで表示し、双方の設定が同期するような実装も加えています。

以下のように動作します。

リスト・リージョンの外観のリスト・テンプレートとしてLinks Listを選んでいます。今回の実装はLinks Listのテンプレートを対象した実装になります。

ページにタイプがリストのリージョンを作成しています。ソースのリストとしてCity Listを選択しています。JavaScriptのコードよりリージョンを参照するため、詳細の静的IDにCITY_LISTを設定しています。

共有コンポーネントのリストに、以下のようにリストCity Listを作成しています。

ターゲットはすべて#action$select-cityを設定しています。この設定により、リストに表示されている要素（都市名）をクリックすると、APEXアクションのselect-cityが呼び出されます。

リストからAPEXアクションを呼び出す設定は、リスト・テンプレートに依存して変わります。今回はLinks Listですが、Menu Popupの場合は以前の記事「メニュー・ポップアップから任意の処理を呼び出す」で紹介した手順になります。

ページ・プロパティのJavaScriptのページ・ロード時に実行に、APEXアクションの定義を記述します。

	apex.actions.add([
	{
	name: "select-city",
	action: function( event, element, args ) {
	// セレクタは選択したリスト・テンプレートによって異なる。これは Links Listの場合。
	const allLabels = document.querySelectorAll("#CITY_LIST li .t-LinksList-label");
	allLabels.forEach((e) => {
	// elementとして返されるのはli要素。
	if (element == e) {
	/*
	* クリックされた要素であれば、P1_CITYに都市名を設定し、
	* 表示を変えるためにu-dangerクラスを追加している。
	* 選択時のリンクの見せ方を変えるにはu-dangerのクラスを変える。
	*/
	apex.items.P1_CITY.setValue(e.textContent, e.textContent, true);
	e.classList.add("u-danger");
	}
	else
	{
	/*
	* 一致していないli要素からはu-dangerを除く。
	*/
	e.classList.remove("u-danger");
	}
	})
	}
	}
	]);

view raw select-list-item-on-list-click.js hosted with ❤ by GitHub

選択した都市名を保持するページ・アイテムとしてP1_CITYを作成しています。選択肢の内の１つを選択するため、タイプにラジオ・グループを選びます。

ラベルにはCityと設定していますが、外観のテンプレートにHiddenを選択しているため、ラベルは表示されません。ラベルは表示されませんが、デフォルトではラベルを表示するための領域が取られるため、レイアウトのラベル列スパンを０にします。これでページ・アイテムの値が左端に寄ります。

設定の列の数に６を設定します。都市の数が５つなので、６であれば表示が１行に収まります。

テンプレート・オプションを開き、一般のStretch Form Itemにチェックを入れ、詳細のItem Group DisplayにDisplay as Pill Buttonを選択します。これで、画面の左右いっぱいの幅に、かつ形状がボタンで表示されるようになります。

リストを静的値で設定しているため、ページ・アイテムのLOVを静的値で設定します。NULL値の表示はオフにします。オンのときは、NULLの選択がラジオ・ボタンの選択肢として追加されます。

ラジオ・グループの選択を変えたときに、リストの選択を変える動的アクションを作成します。動的アクションのタイミングのイベントは、ページ・アイテムのデフォルトである変更です。

TRUEアクションとして、以下のJavaScriptのコードを実行します。

	const v = $v(this.triggeringElement);
	const allLabels = document.querySelectorAll("#CITY_LIST li .t-LinksList-label");
	allLabels.forEach((e) => {
	if ( e.textContent == v ) {
	/*
	* 選択された都市名と、リストのテキスト・ノードが同じであれば
	* リンクをハイライトする。
	*/
	e.classList.add("u-danger");
	}
	else
	{
	/*
	* 一致していないli要素からはu-dangerを除く。
	*/
	e.classList.remove("u-danger");
	}
	});

view raw change-selected-list-item-by-radio-button.js hosted with ❤ by GitHub

今回の実装の紹介は以上です。

今回の記事で扱ったAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/select-list-item-on-click.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完