対話グリッドの列の値をダイアログを開いて編集する - その２

 ちょっと前に「対話グリッドの列の値をダイアログを開いて編集する」として記事を書きましたが、違う実装が出てきたので紹介します。方法の基本的なところ（インライン・ダイアログを使用する）は同じなのですが、JavaScriptのコードが違います。

違うところを記載します。

最初に対話グリッドに静的IDを設定します。ここではKVIGとしています。

対話グリッドの列VALUEにたいして、以下のJavaScript初期化コードを設定します。以下の記述は、列のタイプをHTML式として指定するのが通常ですが、その場合は、列は更新不可になります。タイプがテキスト領域のままでHTML式を適用するには、JavaScript初期化コード内のcellTemplateで指定します。クラス指定にedit-noteを含めていますが、これは動的アクションのタイミング指定で使用します。

function(options) {
    options.defaultGridColumnOptions = {
        cellTemplate: '<button type="button" class="edit-note t-Button t-Button--icon t-Button--small t-Button--link t-Button--iconLeft"><span aria-hidden="true" class="t-Icon t-Icon--left fa fa-pencil"></span>Edit Value</button>'
    }
    return options;
}

インライン・ダイアログのリージョンにページ・アイテムP1_IDを追加します。タイプは非表示とし、保護された値はOFFにします。このページ・アイテムは、選択された行のIDを保持するために使用します。

動的アクションのタイミングを変更します。選択タイプをjQueryセレクタ、jQueryセレクタとして、.edit-noteを指定します。cellTemplateとして記載したボタンを選択しています。

詳細のイベント有効範囲を動的にし、静的コンテナとして#KVIG、つまり対話グリッドのリージョンを指定しています。

Trueアクションとして実行されるJavaScriptのコードとして以下を指定します。選択した対話グリッドの列の値をインライン・ダイアログへ移入します。

let target = this.browserEvent.target,
    view = apex.region("KVIG").call("getCurrentView"),
    record = view.getContextRecord( target )[0], 
    model = view.model;
console.log("open dialog for record ", record);
$s("P1_ID", model.getRecordId(record));
$s("P1_TEXT", model.getValue(record, "VALUE"));

インライン・ダイアログ上の変更を対話グリッドの列に戻すTrueアクションには以下のJavaScriptのコードを指定します。

let view = apex.region("KVIG").call("getCurrentView"),
    model = view.model,
    text = $v("P1_TEXT"),
    record = model.getRecord($v("P1_ID"));
console.log("save notes in record ", record)
model.setValue(record, "VALUE", text);

以上で最初のGIF動画の動作になります。列のJavaScriptによる初期化コードおよびcellTemplateの指定などは、普通はわからない気がします。

アプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/inlinedialogedit2.sql

以上です。Oracle APEXのアプリケーション開発の一助になれば幸いです。

完