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

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

サンプル・データセットの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のアプリケーション作成の参考になれば幸いです。

完

テーマ・ローラーによるレイアウト調整とページ別設定について

X（旧Twitter）を見ていたら、テーマ・ローラーのレイアウトにボディ・コンテンツの最大幅という設定があるけど、これをページごとに設定するにはどうしたら？というポストがありました。

まず、テーマ・ローラーのレイアウトで調整できる項目を確認してみます。以下の項目があります。

• ヘッダーの高さ
• ナビゲーション・ツリー
• アクション列
• 左側の列
• ボディ・コンテンツの最大幅

ヘッダーの高さは、名前の通りヘッダーの高さを設定します。

ナビゲーション・ツリーは、左にあるナビゲーション・メニューの幅を設定します。

アクション列は、ページ・テンプレートにLeft and Right Side Columnsを選んだときの右側のカラムの幅を設定します。

左側の列は、ページ・テンプレートにLeft Side ColumnまたはLeft and Right Side Columnsを選んだときの左側のカラムの幅を設定します。

そしてボディ・コンテンツの最大幅は、中央の本文領域の最大幅を設定します。

テーマ・ローラーで設定するとアプリケーション全体に適用されます。これをページ単位で設定するには、ページ・プロパティのCSSのインラインに以下を記述します。

:root {
    --ut-body-content-max-width: 768px;
}

以上でページ単位でボディ・コンテンツの最大幅が設定できます。

Oracle APEXをずいぶん長く使っている海外の開発者でも「知らなかった」とコメントしていました。Universal Themeのリファレンスに書かれていないので、知らないとしても仕方がないと思います。

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

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

完

ファセット検索の検索リージョンをドロワーのように非表示にする

フランスのパリ在住のLouis Moreauxさんは、毎月曜日にOracle APEXのちょっとした小技をX（旧Twitter）やLinkedInに公開されています。

2024年1月29日のMonday's Tipにて、ファセット検索のページの左にある検索条件（ファセット）を表示するパネルを、ドロワーのように表示と非表示を切り替える実装を紹介しています。

Monday's Tip for Oracle APEX

Some time ago, I needed to save space in a faceted search page to display more columns in the report while keeping a large filter area.

Here's the result, read the thread to find out how 👇#orclAPEX #CSS

1/5 pic.twitter.com/0C3yrU9hOx

— Louis Moreaux (@moreaux_louis) January 29, 2024

Xのポストを読んで実装しようとしたのですがうまくいかず、実装サンプルを参照してやっとXのポストの英語の説明が理解できました。

サンプルのアプリケーションのリンクは以下です。貼り付けるCSSコードは以下のアプリケーションよりコピペします。

https://apex.oracle.com/pls/apex/r/louis/examples/left-column-toggle

サンプル・データセットのEMPをインストールすると作成できるアプリケーションを使って、少々、説明を補足しようと思います。ファセット検索のページはページ番号３に作成されています。

3番目のポストで作成しているリージョンFilterの設定です。

タイプが静的コンテンツのリージョンをLeft Columnの最上位に配置しています。外観のテンプレートとしてBlank with Attributes (No Grid)を選択し、余計な装飾を除いています。

ソースのHTMLコードに以下を記述します。fa-filterはフィルタのアイコン、fs-filter-iconクラスは、HTMLコードに記述しているspan要素を垂直方向に表示するためのCSSクラスです。ページに記述するCSSに、その定義が含まれています。

<span class="fa fa-filter fs-filter-icon">Filters</span>

リージョンの静的IDとしてtitle-regを設定しています。

タイプがファセット検索のリージョンの静的IDとしてsearch-regを設定します。

後はサンプル・プログラムよりCSSのコードをコピーして、ページ・プロパティのCSSのインラインに記述します。

以上で実装完了です。

Lous Moreauxさんは、２番目のポストで「左側のパネルの幅はCSS変数の--ut-body-sidebar-widthで決められていることを覚えておいて。」と言っています。

この値は、ページごとに調整できます。

左側のパネルが閉じているときは、:root（ルート要素）で設定されている--ut-body-sidebar-widthの値が適用されます。今回の例では2.5emです。

左側のパネルが開いたときは、div#t_Body_side:hoverで設定されている--ut-body-sidebar-widthの値が適用されます。今回の例では25emです。

特に左側のパネルが開いた時の横幅は25emだと広すぎることがありそうなので、ファセットの選択肢の長さに合わせて調整するとよいと思います。

いいねと思ったら、リアクションはLouis MoreauxさんのXのポストにお願いします。

完

CSSのhas擬似クラスを使ったレポートのセルの色付け

 対話モード・レポートのセルに色を付けるために、対話モード・レポートのリフレッシュ後にJavaScriptを実行しているのだけど実装として今ひとつ。もっと良い方法は無いものか？という話がありました。

対話モード・レポートとしては以下のようになります。一番上はJavaScriptでセルに色付けを行っています。真ん中は対話モード・レポートの標準的な機能の範囲での実装です。最後はCSSの擬似クラスhasを使っています。

対話モード・レポートのソースとなるSELECT文は、すべて同じです。Oracle APEXに付属しているサンプル・データセットのEMP/DEPTに含まれる表EMPをソースとしています。

給与（列SALのデータ）が1000より少ない時に列COLORの値がredになります。

select EMPNO,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO
       , case
       when sal < 1000 then 'red'
       else ''
       end color
  from EMP

APEXの標準の範囲での実装

列SALの列の書式のHTML式として、以下を設定しています。

<span style="background-color:#COLOR#;">#SAL#</span>

この設定で、列SALの値の背景色が赤になります。APEXでは、その親の要素の属性を変更する方法が提供されていないため、TD要素の背景色を変更できません。

結果として、セル全体の背景色の設定ができていません。

JavaScriptによる実装

JavaScriptによってセルの背景色を変更するために、列SALにdata-color属性として色情報を含めるようにします。これも列の書式のHTML式として設定します。

<span data-color="#COLOR#">#SAL#</span>

対話モード・レポートのリフレッシュ後に、動的アクションとして以下のJavaScriptを実行します。data-colorとして定義した値を、親の要素の背景色として設定しています。

document.querySelectorAll("#emp0 span[data-color]").forEach(
    (e) => {
        e.parentElement.style.backgroundColor = e.dataset.color;
    }
);

動的アクションは、初期化時にも実行するように設定します。

以上でセルの背景色が設定されます。

CSSの擬似クラスhasによる実装

動的アクションを作成する代わりに、ページ・プロパティのCSSのインラインに以下を記述します。

#emp2 td:has(span[data-color=red]) {
    background-color: red;
}

擬似クラスhasはFirefoxではまだサポートされていないようで、使うべきかどうかは迷うところではあります。それでもCSSで設定できるほうが、JavaScriptよりは有望です。

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

https://github.com/ujnak/apexapps/blob/master/exports/css-has-cell-coloring.zip

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

完