日日是Oracle APEX: APEX 24.2のモーダル・ダイアログのサイズ変更を可能にする設定について

2025年1月24日金曜日

Oracle APEX 24.2では、モーダル・ダイアログのページにサイズ変更可能という設定が追加されています。この設定をオンにすることにより、アプリケーションのユーザーは表示されているモーダル・ダイアログのサイズを変更できるようになります。

サイズ変更可能をオンにすると、以下のようにモーダル・ダイアログのサイズを変更できます。

APEX 24.2以前のバージョンでは、この設定はありません。今まではどのように実装していたのか調べてみました。

APEX 24.2以前での、モーダル・ダイアログのサイズ変更を可能にする実装について、以下より紹介します。

空のアプリケーションを作成します。名前はResizable Modal Dialogとします。

アプリケーションの作成をクリックします。

アプリケーションが作成されたら、対話モード・レポートのページを作成します。

ページの作成をクリックします。

対話モード・レポートを選択します。

対話モード・レポートのページの名前はEmployeesとし、フォーム・ページを含めるをオンにします。

フォーム・ページ名はEmployee Detailとし、フォーム・ページ・モードとしてモーダル・ダイアログを選択します。サイズを変更できるのは、モーダル・ダイアログのみです。

データ・ソースの表/ビューの名前としてEMPを選択します。表EMPは、サンプル・データセットのEMP/DEPTに含まれています。

次へ進みます。

主キー列1としてEMPNO(Number)を選択します。

ページの作成をクリックします。

対話モード・レポートとフォームのページが作成されます。

モーダル・ダイアログのページのサイズを変更可能にするには、JavaScriptでapex.navigation.dialogを呼び出して、ページを開く必要があります。呼び出し時の引数pOptionsのresizableにtrueを渡します。

ダイアログとして開くページのURLを引数pUrlに渡します。サーバーでapex_page.get_url（またはapex_util.prepare_url）を実行することで、チェックサムが付いたURLを生成できます。

サーバーで生成したURLをJavaScriptで取得できるよう、Ajaxコールバックを作成します。

Ajaxコールバックの名前はGET_URL、ソースのPL/SQLコードとして以下を記述します。

	declare
	l_url varchar2(800);
	l_response clob;
	begin
	l_url := apex_page.get_url(
	p_page => '3'
	,p_items => 'P3_EMPNO'
	,p_values => apex_application.g_x01
	,p_plain_url => true
	/* p_triggering elementはapex.navigation.dialogで指定するので不要 */
	);
	l_response := apex_string.format('{ "url": "%s" }', l_url );
	apex_debug.info(l_response);
	htp.p(l_response);
	end;

view raw get_url.sql hosted with ❤ by GitHub

JavaScriptでダイアログを開く処理は、APEXアクションで実装します。

ページ・プロパティのJavaScriptのページ・ロード時に実行に、以下を記述します。APEXアクションの名前はopen-employee-dialogです。

	apex.actions.add([
	{
	name: "open-employee-dialog",
	action: (event, element, args ) => {
	apex.server.process(
	"GET_URL",
	{
	x01: args.empno
	},
	{
	success: (data) => {
	console.log(data.url);
	apex.navigation.dialog(
	data.url,
	{
	title: "Employee Detail",
	height: 600,
	width: 800,
	maxWidth: 1200,
	modal: true,
	resizable: true // 24.2以前はresizableはコードでのみ指定可
	},
	"a-Dialog--uiDialog",
	"#EMP" // jQueryでの指定が必要なバージョンでは $("#EMP")
	);
	}
	}
	)
	}
	}
	]);