2026年6月18日木曜日
APEX 26.1で追加されたボタンによるメニューを実装する
Oracle APEX 26.1ではボタンの動作として2つのタイプが設定されました。標準とメニューです。
記事1:メニュー・ポップアップから任意の処理を呼び出す
トリガー・アクションとして値の設定を選びます。
標準はボタンをクリックしたときに、設定したアクションを実行します。これは26.1までのボタンの動作です。タイプとしてメニューを選択すると、ボタンにエントリとして作成されたメニューを表示します。
26.1までは、このような動作をするボタンは、メニュー・ポップアップやメニュー・ウィジェットを使って実装していました。以下の2本の記事で、メニューの実装を紹介しています。
以下のGIF動画は、メニューをAPEX 26.1の動作のタイプがメニューのボタンで実装した動作です。動作自体は、それまでの実装とほとんど変わりません(メニュー・ウィジェットの実装では、選択されたエントリにマークを付けたり、メニュー・エントリを動的に生成することができます)。
オラクル社のToufiq Mohammedさんが、公式ブログの記事「Trigger Actions Bring Declarative Interactivity to Oracle APEX」の中(Buttons Now Support Declarative Menus)で、このメニューについて紹介されています。この記事自体は、主にAPEX 26.1で追加されたトリガー・アクションについて解説しています。記事中でトリガー・アクションでは(動的アクションとは異なり)、デフォルトで2重クリックが発生しないように対応済みと紹介されています。
以前の記事を読み返しましたが、メニュー・ポップアップとメニュー・ウィジェットの双方とも、手の込んだ実装になっていると感じました。
以下より、APEX 26.1でのメニューの実装方法について紹介します。今までの方法とは異なり、宣言的に実装できます。
ボタンSELECT_JOBの動作のタイプとしてメニューを選択します。
タイプにメニューを選択すると、ボタンの下にノードとしてメニューが現れます。
その上でコンテキスト・メニューを表示し、メニューの作成を実行します。
メニューとしてANALYST、CLERK、SALESMAN、MANAGER、PRESIDENTを作成します。レポートの表示を絞り込む条件として、これらのメニューを選択します。
メニューの動作のタイプとしてトリガー・アクションを選択します。
設定のタイプの設定に静的割当てを選択し、値としてANALYST(メニュー名に合わせます)を設定します。
この値の設定先となるコンポーネントを影響を受ける要素に設定します。選択タイプにアイテムを選び、アイテムとしてP4_JOBを設定します。この設定により、このメニューを選択したときにアイテムP4_JOBに値ANALYSTが設定されます。
検索条件の一部であるP4_JOBの値が変更されたときにレポートEmployeesがリフレッシュされるように、変更イベントの禁止はオフにします。
ページ・アイテムP4_JOBに動的アクションを作成します。タイミングのイベントは変更です。
動的アクションのTrueアクションとしてリフレッシュを選択します。影響を受ける要素の選択タイプにリージョンを選び、リージョンとしてEmployeesを設定します。
以上で、ボタンSELECT_JOBのメニューのエントリが選ばれたときに、ページ・アイテムP4_JOBに値が設定され、そのページ・アイテムの値の変更をトリガーとして、リージョンEmployeesの表示が更新されるようになりました。
JavaScriptによるコーディングはすべて削除しています。
APEX 26.1で追加された機能のひとつ、APEXlangビューを実行してJavaScriptのコードがページに含まれていないことを確認します。
APEXlangではコードは```で囲まれますが、APEXlangで出力したページにはJavaScriptに限らず、コードが含まれていないことが確認できます。
APEX 26.1ではメニューの作成が宣言的になり、簡単に実装できるようになりました。
今回の記事は以上になります。
以前のメニューの実装も含めた、APEX 26.1のメニューの実装例を以下にエクスポートしました。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
2023年2月2日木曜日
メニュー・ポップアップから任意の処理を呼び出す - メニュー・ウィジェット
更新:APEX 26.1からメニューを宣言的に実装できるようになりました。記事「APEX 26.1で追加されたボタンによるメニューを実装する」を参照のこと。
先日の記事、APEXリストを使った実装も悪くはないけど、直接メニュー・ウィジェットを扱う方法もある、と教えていただいたので試してみました。
初めにAPEXリストと全く同じ動作をする実装を行います。次にメニュー・ウィジェットをradioGroupとして作成します。radioGroupにすると、以下のように動作します。
APEXリストのリージョンの代わりに、静的コンテンツのリージョンを作成します。
ソースのHTMLコードとして以下を記述します。
<div id="selectjob_menu"></div>
idはselectjob_menuとしていますが、APEXリストとは異なり必ずしも_menuをつける必要はありません。ボタンにdata-menu="selectjob_menu"と設定済みのため、その名前に一致させています。
レイアウトの位置はDialogs, Drawers and Popupsを選択します。外観のテンプレートとしてBlank with Attributes(No Grid)を選択します。
ページ・プロパティのJavaScriptのページ・ロード時に実行に以下を記述します。
以上の変更で、こちらの記事と同じ動作になります。
メニュー・ウィジェットをJavaScriptのコードで作成する場合は、typeとしてaction以外にradioGroupやtoggleといった形式を選ぶことができます。
typeとしてradioGroupを選択し、メニュー・ポップアップを実装するコードです。ページ・ロード時に実行に記述したコードを入れ替えます。
アプリケーションを実行すると、記事の先頭のGIF動画のような動作になります。
https://github.com/ujnak/apexapps/blob/master/exports/menu-popup-with-action.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
追記
表EMP(サンプル・データセットのEMP/DEPTに含まれる)の列JOBの個別値をデータベースから取得し、メニュー・ポップアップのchoicesとして設定する方法は、
choicesの配列を返すAjaxコールバックを作成します。
Ajaxコールバックを呼び出してから、メニュー・ウィジェットを作成します。
完













