ラベル メニュー・ポップアップ の投稿を表示しています。 すべての投稿を表示
ラベル メニュー・ポップアップ の投稿を表示しています。 すべての投稿を表示

2026年6月18日木曜日

APEX 26.1で追加されたボタンによるメニューを実装する

Oracle APEX 26.1ではボタンの動作として2つのタイプが設定されました。標準とメニューです。


標準はボタンをクリックしたときに、設定したアクションを実行します。これは26.1までのボタンの動作です。タイプとしてメニューを選択すると、ボタンにエントリとして作成されたメニューを表示します。

26.1までは、このような動作をするボタンは、メニュー・ポップアップやメニュー・ウィジェットを使って実装していました。以下の2本の記事で、メニューの実装を紹介しています。

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

以下の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動画のような動作になります。

ページ2として今回の実装を追加しています。
https://github.com/ujnak/apexapps/blob/master/exports/menu-popup-with-action.zip

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

追記

表EMP(サンプル・データセットのEMP/DEPTに含まれる)の列JOBの個別値をデータベースから取得し、メニュー・ポップアップのchoicesとして設定する方法は、

choicesの配列を返すAjaxコールバックを作成します。



Ajaxコールバックを呼び出してから、メニュー・ウィジェットを作成します。


完