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

2024年2月8日木曜日

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

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

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

リスト・リージョンの外観のリスト・テンプレートとして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アクションの定義を記述します。

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

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

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

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

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