対話グリッドで選択したセルの値を別の場所に移入する

 対話グリッド上で選択したセルの値を、別の列にコピーする方法、および、ページ上のアイテムにコピーする方法を実装してみました。

準備として対話グリッドを含むアプリケーションを作成します。

クイックSQLの以下のモデルを使用します。

# prefix: test
grids  /insert 10
    a num
    b num

SQLの生成、SQLスクリプトを保存、レビューおよび実行を行い、表TEST_GRIDSを作成します。

アプリケーション作成ウィザードを起動し、対話グリッドを含んだアプリケーションを作成します。

名前はCopy Valueとします。

対話グリッドのページは、以下の設定で作成します。

ページ名はCopy Value、表またはビュー、編集を許可を選択します。表またはビューとしてTEST_GRIDSを選択します。

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

最初に選択したセルの値を、ページ・アイテムにコピーする機能を実装します。

ページ・アイテムP1_CELL_VALUEを、ページCopy ValueのリージョンTest Gridsに作成します。

識別の名前をP1_CELL_VALUE、タイプはテキスト・フィールド、ラベルをセルの値とします。

対話グリッドの列Aに動的アクションを作成します。

識別の名前はクリックしてコピー、タイミングのイベントはクリック、選択タイプは列、リージョンはTest Grids、列はAになります。

Trueアクションを選択し、アクションとしてJavaScriptコードの実行を選択します。設定のコードとして、以下を記述します。

$s("P1_CELL_VALUE",$v(this.triggeringElement));

設定のコードを選択した状態で中央ペインのヘルプを開くと、コードで使用できる属性の説明が表示されます。

以上の設定でアプリケーションを実行します。以下のような動作になります。

イベントがクリックの場合、セルにフォーカスが当たった後にクリックして初めてイベントが発生する動作になっています。期待通りの動作でない場合、フォーカスの取得といった他のイベントの使用も検討できます。

次にページ・アイテムではなく、他のセルにコピーします。

対話グリッドに静的IDを設定します。

対話グリッドTest Gridsを選択し、詳細の静的IDとしてtest_gridsを設定します。

TrueアクションのJavaScriptコードを以下に変更します。

/*
 * setValueを呼び出すためにIGのmodelを取得する。
*/
let grid = apex.region("test_grids").widget(),
    model = grid.interactiveGrid("getViews", "grid").model;
/* 選択されたレコードを取得する */
let elem = $(this.triggeringElement);
let rowId = elem.closest('tr').data('id');
let record = model.getRecord(rowId);
/* 設定元となる値を取り出す。 */
// let sal = model.getValue(record,"A");
let val_a = $v(this.triggeringElement);
/* 値を設定する */
model.setValue(record,"B",val_a);

この変更を行なった上でアプリケーションを実行します。

動作が分かりにくいので、列Bはnullに更新しました。

update test_grids set b = null ;

以下の動作になります。

以上で、実装の説明は終了です。

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

https://github.com/ujnak/apexapps/blob/master/exports/ig-cell-copy-value.sql

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完