Philipp Hartenfellerさんが、彼のブログに以下の記事を載せています。
Oracle APEX anchored inline popups for data inputカスタム属性のdata-parent-elementを指定することにより、開いたボタンにインライン・ポップアップをくっつけることができます。
自分でも実装のサンプルを作ってみました。
data-parent-elementを指定してない場合、インライン・ポップアップは以下のように画面の真ん中に表示されます。
インライン・ポップアップの設定が出来ていれば、ボタンに静的IDを付加した後、インライン・ポップアップのリージョンのカスタム属性を設定するだけです。
data-parent-element="#ボタンの静的ID"
似たような設定を扱ったことがあったなと思ったのですが、ありました。カスタム属性data-menuを使った実装です。
data-parent-elementはユニバーサル・テーマのリファレンスに説明がありませんが、Philipp Hartnenfellerさんの記事によるとAPEX 19.2でも動作した、とのことです。
以下よりサンプル・アプリケーションの実装について紹介します。
サンプル・データセットのEMP/DEPTがインストール済み、空のAPEXアプリケーションを作成したところから作業を始めます。デフォルトで作成されるホーム・ページにインライン・ポップアップを実装します。
役職一覧となるLOVを作成します。共有コンポーネントを開きます。
LOVを開きます。
LOVの作成は最初からを選択します。
次へ進みます。
次へ進みます。
データ・ソースはローカル・データベース、ソース・タイプとしてSQL Queryを選択します。SQL SELECT文を入力として、以下を記述します。表EMPの列JOBの個別の値を求めます。
select distinct job from emp
作成をクリックします。
共有コンポーネントのLOVとしてLIST_OF_JOBSが作成されました。
続けて、通常のインライン・ポップアップを実装します。
ページ・デザイナにてホーム・ページを開きます。
役職の値を保持するページ・アイテムP1_JOBを作成します。タイプに選択リストを選びます。ラベルは役職とします。
LOVのタイプは共有コンポーネント、LOVとして先ほど作成したLIST_OF_LOBSを選択します。追加値の表示はOFFにします。
このページ・アイテムP1_JOBの値は、インライン・ポップアップを開いて設定します。そのため、読取り専用は常時にします。
このページ・アイテムはタイプが選択リストなので、わざわざインライン・ポップアップを実装する必要はありません。あくまで実装のサンプルです。
インライン・ポップアップを開くボタンSELECT_JOBを作成します。ラベルは役職の選択とします。
動作のアクションとして動的アクションで定義を選択します。
役職を選択するインライン・ポップアップを作成します。
リージョンを作成します。
識別のタイトルを役職の選択、タイプは静的コンテンツとします。レイアウトの位置としてDialogs, Drawers and Popupsを選択します。外観のテンプレートとしてInline Popupを選択し、その後、テンプレート・オプションを開きます。
テンプレート・オプションの共通の一般のAuto Height、Remove Page Overlay、Display Popup Calloutにチェックを入れ、SizeをNoneに変更します。
インライン・ポップアップのリージョンに、役職の選択を行なうページ・アイテムを作成します。
識別の名前はP1_JOB_SELECT、タイプとしてラジオ・グループを選択します。ラベルは役職一覧とします。
LOVのタイプは共有コンポーネント、LOVとしてLIST_OF_JOBSを選択します。追加値の表示はOFF、NULL値の表示はONで、NULL表示値は未選択とします。
以上で画面として表示されるコンポーネントは作成できました。
続いてインライン・ポップアップを開く動的アクションと、それを閉じる動的アクションを作成します。
開く方の動的アクションは、ボタンSELECT_JOBに作成します。
作成した動的アクションの識別の名前はonClick SELECT_JOBとします。タイミングはデフォルトでイベントがクリック、選択タイプがボタン、ボタンがSELECT_JOBとなります。
２つのTRUEアクションを作成します。
最初にページ・アイテムP1_JOBの値を、インライン・ポップアップのページ・アイテムP1_JOB_SELECTに初期値として設定します。
識別の名前はP1_JOB -> P1_JOB_SELECT、アクションとして値の設定を選択します。
設定のタイプの設定にJavaScript Expressionを選択し、JavaScript式として以下を記述します。
apex.items.P1_JOB.getValue()
影響を受ける要素の選択タイプにアイテムを選び、アイテムとしてP1_JOB_SELECTを指定します。以上で、設定で取得した値が影響を受ける要素のアイテムに設定されます。
実行の初期化時に実行はOFFにします。
インライン・ポップアップを開くTRUEアクションを作成します。
識別の名前はポップアップを開く、アクションとしてリージョンを開くを選択します。
影響を受ける要素の選択タイプとしてリージョンを選択し、リージョンに役職の選択を選びます。このリージョンが開かれる対象になります。
実行の初期化時に実行はOFFです。
ポップアップを閉じる動的アクションは、ページ・アイテムP1_JOB_SELECTに作成します。
識別の名前はonChange P1_JOB_SELECTとします。タイミングはデフォルトで、イベントが変更、選択タイプがアイテム、アイテムがP1_JOB_SELECTになります。
TRUEアクションはポップアップを開いたときとは反対に、ページ・アイテムP1_JOB_SELECTの値をP1_JOBに設定します。
識別の名前はP1_JOB_SELECT -> P1_JOBとします。設定のJavaScript式は以下に代わり、影響を受ける要素のアイテムはP1_JOBになります。
apex.items.P1_JOB_SELECT.getValue()
次のTRUEアクションで、インライン・ポップアップを閉じます。
識別の名前をポップアップを閉じる、アクションとしてリージョンを閉じるを選択します。
以上で、通常のインライン・ポップアップが実装できました。
動作は以下のようになります。
これからカスタム属性data-parent-elementを設定します。
ボタンSELECT_JOBに静的IDを設定します。
静的IDはSELECT_JOBとします。
インライン・ポップアップのリージョンの詳細のカスタム属性として、以下を設定します。
data-parent-element="#SELECT_JOB"
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/data-parent-element-sample.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
