日日是Oracle APEX: 対話グリッドの行を事前に選択する

2023年7月13日木曜日

対話グリッドが表示されるときに、事前に行を選択した状態にしたいとの相談がありました。サンプル・データセットの表EMPを使って、実装のサンプルを作ってみました。

以下のような動作になります。ジョブを指定して送信すると、再表示された対話グリッドでそのジョブの従業員の行が選択されます。

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

アプリケーション作成ウィザードを起動し、サンプルとなるアプリケーションを作成します。名前は行の事前選択とします。

作成されているホーム・ページを削除し、表EMPをソースとした対話グリッドのページを追加します。

対話グリッドのページはページ名をEMP、表またはビュー、編集を許可を選択し、表またはビューとしてEMPを選択します。

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

アプリケーションが作成されたら、ページ・デザイナにて対話グリッドが実装されているページを開きます。

ジョブを指定するページ・アイテムを作成します。

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

設定の[Enter]を押すと送信をオンにし、ジョブに文字列を入れてEnterを押したときに、ページが送信されて再表示されるようにします。

JavaScriptのコードから対話グリッドを呼び出すために、詳細の静的IDとしてempを設定します。

対話グリッドの属性を開き、パフォーマンスの遅延ロードをオンにします。いくつかのイベントは、遅延ロードがオンのときに限り発生します。また、外観の最初の行の選択をオフにします。

ページ・アイテムP1_JOBの値に応じて選択される行を返すAjaxコールバックのプロセスを作成します。

識別の名前をGET_SELECT_RECORDS、タイプはコードの実行です。ソースのPL/SQLコードとして以下を記述します。

	declare
	l_response clob;
	begin
	select json_object(
	key 'selectRecords' value json_arrayagg(
	to_char(empno)
	)
	) into l_response from emp
	where job = apex_application.g_x01;
	apex_debug.info(l_response);
	htp.p(l_response);
	end;

ジョブの文字列を受け取り、対話グリッド上で選択する行を従業員番号（EMPNO）の配列にして { selectRecords : [ "7823", "7923", ... ] } というJSONドキュメントを返します。

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

識別の名前は対話グリッドの行の選択とします。

タイミングのイベントはページの変更[対話グリッド]、選択タイプはリージョン、リージョンはEmployeesになります。

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

	// console.log(this);
	apex.server.process(
	"GET_SELECT_RECORDS"
	,{
	x01: apex.items.P1_JOB.value
	}
	,{
	success: function(data) {
	// console.log(data);
	if (data.selectRecords !== null) {
	apex.region("emp").call("setSelectedRecords", data.selectRecords);
	}
	}
	}
	);

以上でサンプルの実装は完了です。

アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

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

https://github.com/ujnak/apexapps/blob/master/exports/ig-preselect-rows.zip

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

完