日日是Oracle APEX: モーダル・ダイアログに重ねてモーダル・ダイアログを開く

モーダル・ダイアログとして開いているページから、さらにモーダル・ダイアログを開く方法について質問を受けたので実装してみました。大まかに２通りの実装方法があります。また、標準のポップアップLOVのテンプレートを変更することで、要件を満たす場合もあるでしょう。

インライン・ダイアログを使う。ダイアログは同じページに実装します。
モーダル・ダイアログのページを使う。ダイアログは別のページとして実装します。
ポップアップLOVのテンプレートを変更する。

サンプル・データセットの表EMPを使った対話モード・レポートとフォームのページを作成し、上記の３通りの実装を紹介します。

作成したアプリケーションは、以下のように動作します。

準備

アプリケーション作成ウィザードを起動します。アプリケーションの名前はDialog on Dialogとします。

ページの追加をクリックし、対話モード・レポートとフォームのページを追加します。

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

ページ名をインライン・ダイアログとします。表またはビュー、対話モード・レポートを選択し、表またはビューとして表EMPを選択します。フォームを含めるにチェックを入れ、表EMPを編集するフォームのページを作成します。

このフォームのページを、親となるモーダル・ダイアログのページとします。このフォームのページから、さらにモーダル・ダイアログを開く実装を行います。

ページの追加を実行します。

ページ名をモーダル・ダイアログとして、同じページを追加します。さらにページ名をポップアップLOVとして、同じページを追加します。

インライン・ダイアログ、モーダル・ダイアログ（別ページ）、ポップアップLOVを使った実装を試すページがそれぞれ追加されました。

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

アプリケーションが作成されます。インライン・ダイアログを使った実装はページ番号３、モーダル・ダイアログを使った実装はページ番号５、ポップアップLOVはページ番号７のページに実施します。

インライン・ダイアログによる実装

ページ・デザイナにて、ページ番号３のページを開きます。

Content Body上でコンテキスト・メニューを開き、リージョンの作成を実行します。このリージョンをダイアログにします。

作成したリージョンの識別のタイトルをジョブの選択とします。タイプは静的コンテンツとします。外観のテンプレートにInline Dialogを選択すると、このリージョンがダイアログとして扱われます。

テンプレート・オプションをクリックし、Auto Heightにチェックを入れます。これ以外にも見かけを調整するオプションがあるので、必要に応じて調整します。

OKをクリックして、変更を確定します。

リージョンジョブの選択に、ジョブを選択するページ・アイテムP3_JOB_SELECTIONを作成します。

識別の名前をP3_JOB_SELECTION、タイプは選択リストとします。ラベルはジョブとします。LOVのSQL問合せとして、以下のSELECT文を記述します。

select job d, job r from emp group by job

追加値の表示はOFF、NULL値の表示はON、NULL表示値として- ジョブを選択 -を記述します。

インライン・ダイアログの操作は、すべて動的アクションで実装します。この処理にはインライン・ダイアログのリージョンを開く、閉じる、値の設定が含まれます。

ページ・アイテムP3_JOBをクリックしたときにリージョンジョブの選択を開きます。ページ・アイテムP3_JOBの内容を、ダイアログを開くと表示されるページ・アイテムP3_JOB_SELECTIONを使って選択できるようにします。

ページ・アイテムP3_JOBにたいして、動的アクションを作成します。

識別の名前はP3_JOBをクリックとします。タイミングのイベントはクリック、選択タイプはアイテム、アイテムはP3_JOBになります。

すでにページ・アイテムP3_JOBに設定されている値を、ページ・アイテムP3_JOB_SELECTIONにコピーします。

TRUEアクションの識別のアクションとして値の設定を選択します。設定のタイプの設定にJavaScript Expressionを選び、JavaScript式として以下を記述します。ページ・アイテムP3_JOBの内容になります。

apex.items.P3_JOB.value

影響を受ける要素の選択タイプにアイテム、アイテムにP3_JOB_SELECTIONを選びます。これで、P3_JOBの値がページ・アイテムP3_JOB_SELECTIONに設定されます。

P3_JOBをクリックしたときにのみ実行させるため、初期化時に実行はOFFにします。

続いて、リージョンジョブの選択を開きます。

TRUEアクションを作成します。識別のアクションにリージョンを開くを選択します。影響を受ける要素の選択タイプはリージョン、リージョンとしてジョブの選択を設定します。

以上で、インライン・ダイアログを開く動的アクションが実装できました。

今度はインライン・ダイアログを閉じる処理を追加します。

ページ・アイテムP3_JOB_SELECTIONで値を選択した時点で、インライン・ダイアログを閉じるようにします。

ページ・アイテムP3_JOB_SELECTIONにたいして、動的アクションを作成します。

識別の名前をジョブの選択完了とします。タイミングのイベントは変更、選択タイプはアイテム、アイテムはP3_JOB_SELECTIONとなります。

TRUEアクションは、ダイアログを開けた時とは反対に、ページ・アイテムP3_JOB_SELECTIONの値をページ・アイテムP3_JOBに設定します。

識別のアクションとして、値の設定を選択します。設定のタイプの設定はJavaScript Exrepssion、JavaScript式として、以下を記述します。

apex.items.P3_JOB_SELECTION.value

影響を受ける要素の選択タイプはアイテム、アイテムとしてP3_JOBを選択します。このTRUEアクションでも、初期化時に実行はOFFにします。

TRUEアクションを作成して、値の設定の次に配置します。

識別のアクションとして、リージョンを閉じるを選択します。影響を受ける要素の選択タイプはリージョン、リージョンとしてジョブの選択を選びます。

以上で、インライン・ダイアログを使った実装は完了です。

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

モーダル・ダイアログによる実装

ジョブの選択を異なるページに実装します。ページは、モーダル・ダイアログとします。

ページの作成を実行します。

空白ページを選択します。

ページ番号は８、名前はジョブの選択、ページ・モードはモーダル・ダイアログとします。オプションの静的コンテンツ・リージョンを開き、リージョン１にジョブの選択と入力します。

次へ進みます。

モーダル・ダイアログなので、ナビゲーションのプリファレンスは、このページとナビゲーション・メニュー・エントリを関連付けないから変更しません。

次へ進みます。

終了をクリックし、ページの作成を完了します。

ページが作成されます。

あらかじめ作成されているリージョンジョブの選択の、外観のテンプレートをBlank with Attributesへ変更します。外観のテンプレートがStandardの場合、ページのタイトルとリージョンのタイトルの両方が画面に表示されます。Black with Attributesに変更することにより、リージョンのタイトルは表示されなくなり、ページのタイトルのみが表示されます。

ジョブを選択するページ・アイテムP8_JOB_SELECTIONを作成します。これは、インライン・ダイアログの際に作成したP3_JOB_SELECTIONとまったく同じ設定です。

ページ・アイテムP8_JOB_SELECTIONの値が変更されたときに、ページの送信を行います。

P8_JOB_SELECTIONに動的アクションを作成します。

識別の名前をジョブの確定とします。タイミングのイベントは変更、選択タイプはアイテム、アイテムはP8_JOB_SELECTIONです。

TRUEアクションの識別のアクションとして、ページの送信を選択します。

動的アクションでページの送信を行なう代わりに、ボタンを作成してページの送信を行なうこともできます。

ページが送信されたら、モーダル・ダイアログを閉じます。

左ペインでプロセス・ビューを開き、プロセスを作成します。

識別の名前はダイアログを閉じる、タイプとしてダイアログを閉じるを選択します。設定の戻すアイテムにP8_JOB_SELECTIONを指定します。

ページ・プロパティのダイアログのチェーンをOFFにします。（レポートと同時にフォームを作成したときはチェーンのデフォルトはOFFですが、単体のページでモーダル・ダイアログを作成した場合はONがデフォルトのようです。）

チェーンがONの場合、このモーダル・ダイアログのページは親のモーダル・ダイアログの画面を置き換えます。（同じiframeを使用する）チェーンがOFFの場合は、親のモーダル・ダイアログの中で、モーダル・ダイアログが開かれます。

子となるモーダル・ダイアログは、以上で出来上がりです。

親のページから呼び出す設定を行います。

ページ・デザイナにて、ページ番号５のフォームのページを開きます。

インライン・ダイアログのようにページ・アイテムをクリックしたときに、別のページを開く実装は簡単ではないです(JavaScriptでapex.navigation.dialogを呼び出す）。今回は別ページを開くボタンを作成します。

識別のボタン名はB_SELECT_JOBとします。ラベルはジョブの選択とします。動作のアクションとして、このアプリケーションのページにリダイレクトを選びます。

ターゲットをクリックし、リンク・ビルダー・ターゲットを開きます。

ターゲットのページは８、アイテムの設定の名前にP8_JOB_SELECTION、値には&P5_JOB.を指定します。値に&P5_JOB.が設定されいている影響について、後述しています。

OKをクリックして、変更を保存します。

ダイアログがクローズしたときに返される値（P8_JOB_SELECTIONの値）を、ページ・アイテムP5_JOBに設定する動的アクションを作成します。

左ペインで動的アクション・ビューを開き、ダイアログのクローズで動的アクションを作成します。

識別の名前をジョブの設定とします。タイミングのイベントはダイアログのクローズ、選択タイプはリージョン、リージョンとしてEmployeesを選びます。

TRUEアクションの識別のアクションとして、値の設定を選択します。設定のタイプの設定はDialog Retrun Item、戻りアイテムはP8_JOB_SELECTIONになります。戻りアイテムは異なるページに存在するため、選択リストから選ぶことはできません。キーボードから入力します。影響を受ける要素の選択タイプはアイテム、アイテムとしてP5_JOBを指定します。

ページ番号8のモーダル・ダイアログが閉じるときに戻すアイテムとして指定したP8_JOB_SELECTIONの値を受け取って、ページ・アイテムP5_JOBに設定しています。

このアクションも、初期化時に実行はOFFです。