2025年5月20日火曜日

対話グリッドの新規行を任意の処理で初期化する

対話グリッドで行の追加を実行する際に、ブラウザ上のJavaScriptで計算した値を列の初期値として設定します。対話グリッドの列のプロパティとしてデフォルトがありますが、この値はサーバー側で設定するため、データベースに保存されている値か、それを元にした値に限定されます。

今回はサンプル・データセットのEMP/DEPTに含まれる表EMPをデータ・ソースとした対話グリッドを作成し、対話グリッド上で選択した従業員の給与の最大値を、新規行の給与として設定します。

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


以下より実装について紹介します。

空のAPEXアプリケーションを作成し、ホーム・ページに対話グリッドのリージョンを作成します。

ソースの表名にEMPを指定し、ROWIDを含めるをオンにします。表EMPの主キー列はEMPNOですが、対話グリッドでは主キーは自動採番されることを想定しているため、主キー列として列EMPNOは選択できません。


ROWIDを含めるをオンにすることにより、主キー列としてROWIDが対話グリッドに追加されます。

列EMPNOを選択し、ソースの問合せのみ、主キーの両方をオフにします。また、列EMPNOは実際には主キーなので、検証の必須の値をオンにします。


対話グリッドで行の追加をできるようにするため、対話グリッドの属性を開き、編集の有効をオンにします。


選択した行の主キーの値を保持するページ・アイテムとしてP1_SELECTIONを作成します。

属性のタイプは非表示が適切ですが、今回はデバッグしやすいようにタイプをテキスト・フィールドにしています。


対話グリッド上で選択した行の主キー値がページ・アイテムP1_SELECTIONに設定されるように、初期化JavaScriptファンクションに以下を記述し、selectionStateItemとしてP1_SELECTIONを割り当てます。
function( config ) {
    config.defaultGridViewOptions = {
        selectionStateItem: "P1_SELECTION"
    };
    return config;
}

以上で対話グリッドで選択した行のROWIDが、: (コロン)区切りでページ・アイテムP1_SELECTIONに設定されます。


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

タイミングのイベントとして行の初期化[対話グリッド]を選択します。


TRUEアクションはJavaScriptコードの実行とし、設定のコードに以下を記述します。


以上でアプリケーションは完成です。実行すると記事の先頭のGIF動画のように動作します。

対話グリッドで行の追加をクリックすると、デフォルトではすべての列が空白になります。サーバー側でデフォルト値を設定できますが、クライアント側のJavaScriptのコーディングにより初期値を設定できると、さらに新規行の入力の手間が減るでしょう。

今回の記事は以上になります。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/set-initial-value-for-new-row-on-interactive-grid.zip

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

完
時刻: