対話グリッド自体が持つハイライトの設定ではなく、外部からの操作で対話グリッドの行をハイライトさせる方法について調べました。
サンプルの実装では、ボタンにマウスポインタが乗ったときに、ボタンの静的IDに一致している部門の行をハイライトしています。ポインタが外れたときにハイライトを解除します。
サンプル・データセットのEMP/DEPTを英語でインストールして使用します。
アプリケーション作成ウィザードを起動します。名前は対話グリッドの行ハイライトとします。
デフォルトで作成されているホーム・ページを削除し、対話グリッドのページを追加します。
対話グリッドのページの追加では、編集を許可を選択し、表またはビューにEMPを指定します。
アプリケーションが作成されたら、ページ・デザイナで対話グリッドのページを開きます。
対話グリッドをJavaScriptから操作するために、対話グリッドに静的IDを設定します。
詳細の静的IDにempを設定します。
ボタンを配置するリージョンを作成します。
識別のタイトルはButtons、タイプは静的コンテンツです。外観のテンプレートとして、Buttons Containerを選択します。
レイアウトの新規行の開始はオフにします。これから作成する他のボタンも同様にオフに設定し、それらのボタンを横並びに配置します。
外観のCSSクラスとしてusedForHighlightを設定します。カスタム・イベントのターゲットに使用し、複数のボタンから呼び出される動的アクションを１カ所で定義します。
動作のアクションとして動的アクションで定義を選択します。ボタンを押しても何も実行されないようにします。
詳細の静的IDとしてSALESを指定します。この値と列Departmentの値の一致を確認します。
同様の設定でボタンRESEARCH、OPERATIONS、ACCOUNTINGを作成します。SALESの部分を置き換えます。
画面上に配置するコンポーネントの作成は以上です。
これから行ハイライトの実装を始めます。
ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。行ハイライトを行なうファンクションapplyHighlightRowsと、行ハイライトを解除するremoveHighlightRowsを含みます。
RecordMetadataのhighlightに設定するクラスは、実際にはTR要素のclass属性に追加されます。背景色の変更に使用するCSSクラスをページ・プロパティのCSSのインラインで定義します。
TR要素の子要素であるTDの背景色（background-colorの指定）は、CSS変数の--a-gv-background-colorが設定されています。そのため、TR要素でbackground-colorを指定しても、TD要素の--a-gv-background-color（デフォルトは白）が優先されます。
選択した行の背景色を変更するため、TD要素の背景色である--a-gv-background-colorの定義を変更しています。
左ペインで動的アクション・ビューを開きます。カスタム・イベントで実行される動的アクションを作成します。
識別の名前はマウスポインタが乗ったときとします。イベントのタイミングにカスタムを選択します。
カスタム・イベントはmouseenter（mouseenter自体は標準のブラウザ・イベントです）、選択タイプはjQueryセレクタ、jQueryセレクタとして.usedForHighlightを指定します。
TRUEアクションの名前はハイライトの適用、アクションとしてJavaScriptコードの実行を選択します。設定のコードにapplyHighlightRowsの呼び出しを記述します。
applyHighlightRows("emp", this.triggeringElement.id, "DEPTNO", "hlr");
同様に、動的アクションとしてマウスポインタが離れたときを作成します。タイミングのカスタム・イベントにmouseenterの代わりにmouseleaveを指定します。
TRUEアクションとしてハイライトの解除を作成します。設定のコードにremoveHighlightRowsの呼び出しを記述します。
removeHighlightRows("emp");
以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/ig-highlight-rows.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
