サイズ変更可能をオンにすると、以下のようにモーダル・ダイアログのサイズを変更できます。
APEX 24.2以前での、モーダル・ダイアログのサイズ変更を可能にする実装について、以下より紹介します。
空のアプリケーションを作成します。名前はResizable Modal Dialogとします。
アプリケーションの作成をクリックします。
ページの作成をクリックします。
主キー列1としてEMPNO(Number)を選択します。
対話モード・レポートを選択します。
対話モード・レポートのページの名前はEmployeesとし、フォーム・ページを含めるをオンにします。
フォーム・ページ名はEmployee Detailとし、フォーム・ページ・モードとしてモーダル・ダイアログを選択します。サイズを変更できるのは、モーダル・ダイアログのみです。
データ・ソースの表/ビューの名前としてEMPを選択します。表EMPは、サンプル・データセットのEMP/DEPTに含まれています。
次へ進みます。
ページの作成をクリックします。
対話モード・レポートとフォームのページが作成されます。
モーダル・ダイアログのページのサイズを変更可能にするには、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コードとして以下を記述します。
JavaScriptでダイアログを開く処理は、APEXアクションで実装します。
ページ・プロパティのJavaScriptのページ・ロード時に実行に、以下を記述します。APEXアクションの名前はopen-employee-dialogです。
対話モード・レポートのリージョンに静的IDとしてEMPを設定します。ダイアログを開くときに、対話モード・レポートをtriggering elementに指定するためです。この設定により、対話モード・レポートがダイアログ・クローズのイベントを受け付けます。
ボタンCREATEをクリックしたときに、APEXアクションopen-employee-dialogが実行されるように設定します。
アクションの動作を動的アクションで定義に変更し、詳細のカスタム属性に以下を記述します。
data-action="open-employee-dialog?empno="
続いて、編集フォームを開くリンクを設定します。
対話モード・レポートの属性を開き、リンクのターゲットを変更します。
ターゲットのタイプをURLに変更し、URLに以下を記述します。
#action$open-employee-dialog?empno=#EMPNO#
Oracle APEX 24.2では、この実装をスイッチひとつで有効にできます。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/resizable-modal-dialog.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
