メニュー・ポップアップから任意の処理を呼び出す - メニュー・ウィジェット

 先日の記事、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のページ・ロード時に実行に以下を記述します。

	$("#selectjob_menu").menu( {
	items:[
	{
	type:"action",
	label: "ANALYST",
	action: () => {
	apex.item("P2_JOB").setValue("ANALYST");
	apex.region("EMP").refresh();
	}
	},
	{
	type:"action",
	label: "CLERK",
	action: () => {
	apex.item("P2_JOB").setValue("CLERK");
	apex.region("EMP").refresh();
	}
	},
	{
	type:"action",
	label: "SALESMAN",
	action: () => {
	apex.item("P2_JOB").setValue("SALESMAN");
	apex.region("EMP").refresh();
	}
	},
	{
	type:"action",
	label: "MANAGER",
	action: () => {
	apex.item("P2_JOB").setValue("MANAGER");
	apex.region("EMP").refresh();
	}
	},
	{
	type:"action",
	label: "PRESIDENT",
	action: () => {
	apex.item("P2_JOB").setValue("PRESIDENT");
	apex.region("EMP").refresh();
	}
	}
	]
	});

view raw create-menu-widget.js hosted with ❤ by GitHub

以上の変更で、こちらの記事と同じ動作になります。

メニュー・ウィジェットをJavaScriptのコードで作成する場合は、typeとしてaction以外にradioGroupやtoggleといった形式を選ぶことができます。

typeとしてradioGroupを選択し、メニュー・ポップアップを実装するコードです。ページ・ロード時に実行に記述したコードを入れ替えます。

	apex.actions.add( {
	name: "select-job",
	get: () => {
	return apex.item("P2_JOB").getValue();
	},
	set: (val) => {
	apex.item("P2_JOB").setValue(val);
	apex.region("EMP").refresh();
	},
	choices: [
	{
	label: "ANALYST",
	value: "ANALYST"
	},
	{
	label: "CLERK",
	value: "CLERK"
	},
	{
	label: "SALESMAN",
	value: "SALESMAN"
	},
	{
	label: "MANAGER",
	value: "MANAGER"
	},
	{
	label: "PRESIDENT",
	value: "PRESIDENT"
	}
	]
	});
	$("#selectjob_menu").menu( {
	items:[
	{
	type:"radioGroup",
	action: "select-job"
	}
	]
	});

view raw menu-widget-radiogroup.js hosted with ❤ by GitHub

アプリケーションを実行すると、記事の先頭のGIF動画のような動作になります。

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

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

追記

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

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

	declare
	l_response clob;
	begin
	select json_arrayagg(json_object('label' value job, 'value' value job))
	into l_response
	from (
	select distinct job as job from emp
	);
	htp.p(l_response);
	end;

view raw get-choices-list.sql hosted with ❤ by GitHub

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

	let result = apex.server.process("GET_LABELS");
	result.done( (data) => {
	apex.actions.add( {
	name: "select-job",
	get: () => {
	return apex.item("P3_JOB").getValue();
	},
	set: (val) => {
	apex.item("P3_JOB").setValue(val);
	apex.region("EMP").refresh();
	},
	choices: data
	});
	$("#selectjob_menu").menu( {
	items:[
	{
	type:"radioGroup",
	action: "select-job"
	}
	]
	});
	});

view raw menu-popup-choices-db.js hosted with ❤ by GitHub

完