日日是Oracle APEX: 対話グリッド

ラベル 対話グリッド の投稿を表示しています。すべての投稿を表示

2025年5月22日木曜日

対話グリッドで選択したセルだけではなく新規行のすべてのセルにプレースホルダを表示させる

対話グリッドではセルが選択されると、その列に設定されているプレースホルダが表示されます。

サンプル・データセットのEMP/DEPTに含まれる表EMPをソースとした、編集可能な対話グリッドを例にとって説明します。

列ENAMEの外観の値のプレースホルダーに従業員名を入力と設定します。

列JOBの外観の値のプレースホルダーにJOBを入力と設定します。

この状態で行の追加を実行します。列ENAMEのセルにフォーカスが当たると、プレースホルダーに設定した従業員を入力が表示されます。

列JOBにフォーカスを移すと、プレースホルダーに設定したジョブを入力が表示されます。

プレースホルダーが表示されるのは、セルがフォーカスされたときのみです。そのため、行の追加を行なった時点ではプレースホルダーは表示されません。

行の追加を実行したときにセルにフォーカスが当たっていなくても、プレースホルダーを表示する方法がありませんか？というのが本記事のテーマになります。

セルにフォーカスを当てなくてもプレースホルダーを表示するために、ページ・プロパティのCSSのインラインに以下を記述しました。

tr.is-active .placeholder-ename:empty::before {
  content: "従業員名を入力 例:山田太郎";
  color: gray;
}

tr.is-active .placeholder-job:empty::before {
  content: "ジョブを入力 例:SALESMAN";
  color: gray;
}

ここで定義したCSSクラスplaceholder-enameを、列ENAMEの外観のCSSクラスに設定します。

同様に列JOBの外観のCSSクラスにplaceholder-jobを設定します。

以上の設定で行の追加を行なうと、フォーカスが当たっていないセルにCSSクラスで定義したプレースホルダーが表示されます。

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

簡単なアプリケーションですがエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/sample-interactive-grid-placeholder.zip

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

完

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のアプリケーション作成の参考になれば幸いです。

完

2024年10月22日火曜日

APEX 24.1の対話グリッドに追加されたselectionStateItemの使い方

Oracle APEX 24.1より対話グリッドにselectionStateItemというオプションが追加されました。このオプションにページ・アイテムを指定することで、対話グリッド上で選択した行の主キーの値をページ・アイテムに設定できます。

以前は対話グリッドのイベント選択の変更[対話グリッド]で呼び出される動的アクションを作成し、JavaScriptコードにて対話グリッド上の選択されたレコードの取得とページ・アイテムへの主キー値の設定を実施する必要がありました。

この実装方法については、記事「レポート上で選択した行のIDをページ・アイテムに設定する」で紹介しています。この記事ではクラシック・レポートでの実装も紹介していますが、Oracle APEX 24.1からはテンプレート・コンポーネントの属性に行選択（単一選択と複数選択）が追加されたため、こちらもコーディングはほぼ不要になっています。

対話グリッドでのselectionStateItemの設定は、初期化JavaScriptファンクション内で行います。

ページ・アイテムを作成し、そのページ・アイテムを以下のようなコードの記述によりselectionStateItemとして設定します。

function( config ) {
    config.defaultGridViewOptions = {
        selectionStateItem: "P1_SELECTION"
    };
    return config;
}

対話グリッドで行を選択すると、以下のように動作します。一般的にはページ・アイテムは非表示にしますが、あえてページ・アイテムの値を表示させています。

今回の記事は以上です。

簡単なアプリケーションですが、エクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/sample-grid-selectionstateitem.zip

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

完

マスター表の編集フォームにディテール表を編集する対話グリッドを配置する

マスター表にあるレコードを編集するフォームに、そのレコードに紐づく子レコードを同時に編集する対話グリッドを配置してみます。

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

以下のクイックSQLのモデルより、マスター・ディテール関係を持つ簡単な表EBAJ_MDF_CLASSESとEBAJ_MDF_MEMBERSを作成します。マスター表のEBAJ_MDF_CLASSESにはクラスの名前、EBAJ_MDF_MEMBERSはクラスに所属するメンバーの名前を保存します。

# prefix: ebaj_mdf
classes
    class_name vc80 /nn

members
    class_id /fk classes /nn /cascade
    member_name vc80 /nn

表EBAJ_MDF_MEMBERSの列CLASS_IDにはマスター表への参照制約を作成し（/fk classes）、また、NOT NULL制約およびマスター表の行が削除される際に、紐づいている子レコードを削除するオプション（/cascade）を付けています。

レビューおよび実行をクリックし、表の作成までの一連の作業を実行します。

表EBAJ_MDF_CLASSESとEBAJ_MDF_MEMBERSが作成されます。

アプリケーション作成ウィザードを起動します。

作成するアプリケーションの名前はMaster Detail Form with Gridとします。デフォルトのホーム・ページを削除し、表EBAJ_MDF_CLASSESをソースとした、フォーム付き対話モード・レポートのページを追加します。

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

アプリケーションが作成されます。

対話グリッドは、フォームとして作成されたページに作成します。

ページ・デザイナでフォームのページを開き、新規に対話グリッドのリージョンを作成します。

識別の名前はMembersとします。タイプは対話グリッド、ソースの表名として、ディテール表であるEBAJ_MDF_MEMBERSを指定します。

フォームとして開かれた親レコードの主キーの値は、ページ・アイテムP2_IDに保持されています。対話グリッドに表示する（つまり編集対象となる）行を、親レコードに紐づくメンバーに限定するため、WHERE句にclass_id = :P2_IDという条件を記述します。

対話グリッドの列CLASS_IDを選択します。

対話グリッドでは親レコードに紐づいた子レコードだけを表示するので、列CLASS_IDを表示する必要はありません。ここではタイプを非表示に変更します。次に対話グリッドで新規行を追加するときの列CLASS_IDのデフォルト値が、ページ・アイテムのP2_IDの値になるように、デフォルトを設定します。

対話モード・レポートの属性を開き、編集をオンにします。ツール・バーのコントロールより保存ボタンのチェックを外し、対話グリッド単体での編集を不可として、つねにフォームのボタンから作成、変更の適用、削除が実施されるようにします。

プロセス・ビューを開き、対話グリッドの処理を行うプロセスMembers - 対話グリッド・データの保存をダイアログを閉じるより上に配置します。プロセスが呼ばれるより先にダイアログが閉じてしまうと、表EBAJ_MDF_MEMBERSへの操作が行われません。

ここまでの実装で、親レコードの作成、更新、削除とそれに紐づく子レコードの作成、更新、削除は実施できます。しかし、親レコードの作成と子レコードの作成を同時に行うと、ORA-01400（NOT NULL制約の違反）が発生します。

列CLASS_IDのデフォルト値としてページ・アイテムP2_IDを設定していますが、フォームのページが開いた時点では、表EBAJ_MDF_CLASSESに行は作成されていません。そのため、ページ・アイテムP2_IDはNULLとなり、列CLASS_IDのデフォルト値もNULLになります。列CLASS_IDにNOT NULL制約を付けていない場合は、対話グリッドに設定した行は表EBAJ_MDF_MEMBERSに挿入されますが、CLASS_IDがNULLであるため親レコードと紐づかない、表示も編集もできないレコードになってしまいます。