2023年2月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を割り当てます。


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

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


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


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

へ進みます。


リスト・エントリ・ラベルとしてANALYSTCLERKSALESMANMANAGERPRESIDENTを指定し、ターゲット・ページ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-clerkselect-job-salesmanselect-job-managerselect-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のアプリケーション作成の参考になれば幸いです。