Oracle APEX 21.2の新機能として、ページおよびリージョンのテンプレートとしてドロワーが追加されました。ドロワーはOracle Cloudのコンソールでよく見かける以下のような、画面の端から引き出されるようなインターフェースです。
サンプル・データセットのEMP/DEPTから作成したアプリケーションに含まれる表DEPTのレポートとフォームを、ドロワーを使うインターフェースに置き換えてみます。
ページのテンプレートを変更して対応する方法は以下になります。フォームのページ（サンプルではページ番号６）の外観のダイアログ・テンプレートをModal DialogからDrawerへ変更します。以上で対応完了です。
Inline Drawerのリージョンに置き換えるのは、かなり手間がかかります。それでも試してみましょう。
DEPT表の対話モード・レポートのページにドロワーのリージョンを追加します。元々の編集フォームは別ページとして実装されていますが、そのページはドロワーの実装後は使われないため削除できます。
レンダリング・ツリーのBodyでリージョンの作成を実行します。識別の名前は部門、タイプとしてフォームを選択します。ソースの表名としてDEPTを選択します。表DEPTを選択すると、その表に含まれる列が認識されます。Oracle APEX 21.2からは表を選択した時点で、主キーの判別、非表示設定、およびチェックサムによる保護を自動で行うようになりました。
ドロワーの見え方を調整するために、テンプレート・オプションを開きます。
表DEPTのページ・アイテムP5_DEPTNOは主キーとして認識されているため、非表示かつ値の保護がデフォルトで有効になっています。今回は動的アクションでP5_DEPTNOの値を変更します。そのため、設定の保護された値はOFFにします。
SizeがNone(Auto)だと少々ドロワーが小さかったので、Mediumに変更します。OKをクリックしてテンプレート・オプションの画面を閉じます。
フォーム・リージョンを追加したときに、レンダリング前の実行ポイントにフォームを初期化するプロセス初期化フォーム部門が作成されています。ドロワー・リージョンの初期化はページが開くときではなくリージョンを開くときに行うので、このプロセスは不要です。削除します。
ボタンB_CREATEから順番に設定していきます。ラベルを作成とします。４つのボタンを横一列に並べるため、新規行の開始をOFFにします。外観のホットをONにします。動作のデータベース・アクションとしてSQL INSERT操作を選択します。詳細の静的IDはB_CREATEとします。ボタンの静的IDはJavaScriptでボタンを非表示にする際に使用します。
ボタンB_UPDATEはB_CREATEと似た設定になります。ラベルは変更の適用、データベース・アクションはSQL UPDATE操作、静的IDはB_UPDATEとします。
ボタンB_DELETEは少し異なった設定になります。ラベルは削除とします。テンプレート・オプションを開きTypeにDangerを選択します。ボタンが赤く表示されるようになります。データベース・アクションはSQL DELETE操作、確認の要求をONにします。このように設定するとポップアップが開くようになります。ポップアップに表示される確認のメッセージとして、本当に削除しますか？と記述します。スタイルには危険を選択します。詳細の静的IDはB_DELETEとします。
最後にボタンB_CANCELを設定します。識別のラベルはキャンセルとします。キャンセルが一番左端に配置するボタンなので、新規行の開始はONのままです。キャンセルをクリックすると、すでに開いているドロワーを閉じます。この動作は動的アクションで定義するため、動作のアクションに動的アクションで定義を選択します。
ボタンB_CANCELに動的アクションを作成します。識別の名前はドロワーのクローズ、タイミングはボタンのデフォルトである、イベントはクリック、選択タイプはボタン、ボタンはB_CANCELの設定になります。
TRUEアクションとして、リージョンを閉じるを選択し、影響を受ける要素の選択タイプとしてリージョンを選び、リージョンに部門を選択します。
すでに存在する作成(CREATE)ボタンをクリックしたときに、ダイアログを開く代わりにドロワーを開くようにします。ボタンCREATEを選択し、動作のアクションを動的アクションで定義に切り替えます。
ボタンCREATEに動的アクションを作成します。識別の名前はドロワーのオープンとします。タイミングはイベントはクリック、選択タイプはボタン、ボタンはCREATEになります。
TRUEアクションは５つ作成します。最初に作成をクリックしてドロワーを開く際に、リージョンにあるページ・アイテムをすべて空にします。識別のアクションとして値の設定を選択し、設定のタイプの設定はStatic Assignment、値はブランクにします。影響を受ける要素として選択タイプをアイテム、アイテムとしてP5_DEPTNO、P5_DNAME、P5_LOCを指定します。
ボタンB_CREATEを表示するアクションを作成します。
ボタンB_UPDATEを非表示とするアクションを作成します。
ボタンB_DELETEを非表示とするアクションを作成します。
準備が完了したので、ドロワーを開くアクションを作成します。識別のアクションとしてリージョンを開くを選択し、影響を受ける要素の選択タイプをリージョン、リージョンとして部門を選びます。
実際に更新処理を行うプロセスを作成します。プロセス・ビューを開き、プロセスの作成を行います。識別の名前は部門の処理とし、タイプとしてフォーム - 行の自動処理(DML)を選択します。フォーム・リージョンは部門です。設定はデフォルトのまま変更しません。
対話モード・レポートの行にある編集アイコンをクリックしたときに、ダイアログの代わりにドロワーを開くようにします。ドロワーを開くJavaScriptのファンクションとして以下を記述します。ページ・プロパティのJavaScript - ファンクションおよびグローバル変数の宣言に記述します。
function openDrawer(deptno, dname, loc) {
$s("P5_DEPTNO", deptno);
$s("P5_DNAME", dname);
$s("P5_LOC", loc);
$x_Hide("B_CREATE");
$x_Show("B_UPDATE");
$x_Show("B_DELETE");
apex.theme.openRegion("REGION_FORM_DEPT");
}
編集アイコンをクリックしたときのターゲットをJavaScriptの呼び出しに変更します。ターゲットをクリックします。
javascript:openDrawer("#DEPTNO#","#DNAME#","#LOC#")
以上で完成です。アプリケーションを実行すると、最初のGIF動画のようになります。
作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/new212-drawer.sql
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
