2023年2月1日水曜日

メニュー・ポップアップから任意の処理を呼び出す

更新:APEX 26.1からメニューを宣言的に実装できるようになりました。記事「APEX 26.1で追加されたボタンによるメニューを実装する」を参照のこと。 

メニュー・ポップアップから任意の処理を呼び出すことができないか、という相談がありました。メニュー・ポップアップは、Universal ThemeのリファレンスのMenu Popupで紹介されています。

メニュー・ポップアップでJOBを選択することで、表EMPのレポートをJOBごとに表示するような実装を試してみました。

以下より、実装について紹介します。

アプリケーション作成ウィザードを起動し、表EMPのクラシック・レポートを追加したアプリケーションを作成します。

アプリケーションが作成されたら、ページ・デザイナにてクラシック・レポートが実装されているページを開きます。

検索条件となるJOBを保持するページ・アイテムを作成します。

識別の名前はP1_JOB、タイプは非表示とします。JavaScriptで値を設定するため、設定の保護された値はOFFにします。

クラシック・レポートに検索条件を設定します。

ソースのWHERE句として以下を記述します。

:P1_JOB is null or JOB = :P1_JOB

送信するページ・アイテムにP1_JOBを指定します。

JavaScriptよりリージョンのリフレッシュを呼び出すため、詳細の静的IDとしてEMPを割り当てます。


メニュー・ポップアップに使用するリストを作成します。

共有コンポーネントのリストを開きます。


作成済みのメニューが一覧されます。作成をクリックします。


作成するリストの名前はジョブのリストとします。タイプに静的を選択します。

次へ進みます。


リスト・エントリ・ラベルとしてANALYST、CLERK、SALESMAN、MANAGER、PRESIDENTを指定し、ターゲット・ページIDまたはカスタムURLはすべて#を指定します。

表EMPの内容が日本語の場合は、リスト・エントリ・ラベルを日本語のJOBの内容にすることもできます。

次へ進みます。


リスト・リージョンを作成しますか。としてカレント・ページにリスト・リージョンを作成するを選択します。クラシック・レポートが作成されているページがカレント・ページであることを、右上のページの編集ボタンより確認します。リージョン位置はページ・テンプレート・ボディ、リージョン・テンプレートはBlack with Atrributes、リスト・テンプレートはMenu Popupを選びます。

リストの作成をクリックします。


リストジョブのリストが作成されます。

作成されたリストのリスト・エントリにアクションを紐づけるため、リストジョブのリストを開きます。


リスト・エントリの鉛筆アイコンをクリックします。


リスト・エントリのユーザー定義属性のセクションに移り、1. Menu Item ID / Action Nameにアクション名を設定します。リスト・エントリANALYSTにはselect-job-analystを設定します。

ページ・ロード時にここで指定した名前で、apex.actionsのアクションが作成されます。(テンプレート・オプションのAdd Actionsにチェックを入れる必要あり)

変更の適用をクリックします。


同様にして、それぞれのリスト・エントリにselect-job-clerk、select-job-salesman、select-job-manager、select-job-presidentを設定します。

ページ・デザイナに移り、作成されたリストのリージョンを選択します。

プロパティ・エディタで属性を開き、外観のテンプレート・オプションを開きます。


Add Actionsにチェックを入れます。


リストのリージョンに静的IDとしてselectjobを設定します。


メニュー・ポップアップを開くボタンを作成します。

識別のボタン名をSELECT_JOB、ラベルをSelect Jobとします。動作のアクションとして動的アクションで定義を選択します。

詳細のカスタム属性としてdata-menu="リスト・リージョンの静的ID_menu"を設定します。今回の実装ではリスト・リージョンに静的IDとしてselectjobを設定しているため、設定値は以下になります。

data-menu="selectjob_menu"


メニュー・ポップアップを開き、リスト・エントリが選択されたときに実行されるコードを記述します。

以下のコードをページ・プロパティのJavaScriptのページ・ロード時に実行に記述します。リストがロードされたときに作成されているアクションの属性actionに、実行されるコードを記述しています。



以上で実装は完了です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/menu-popup-with-action.zip

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

完