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

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

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

完