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