先日の記事、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コールバックを呼び出してから、メニュー・ウィジェットを作成します。
完
