サンプル・データセットのEMP/DEPTに含まれる表EMPをソースとした、編集可能な対話グリッドを例にとって説明します。
列JOBの外観の値のプレースホルダーにJOBを入力と設定します。
プレースホルダーが表示されるのは、セルがフォーカスされたときのみです。そのため、行の追加を行なった時点ではプレースホルダーは表示されません。
この状態で行の追加を実行します。列ENAMEのセルにフォーカスが当たると、プレースホルダーに設定した従業員を入力が表示されます。
列JOBにフォーカスを移すと、プレースホルダーに設定したジョブを入力が表示されます。
行の追加を実行したときにセルにフォーカスが当たっていなくても、プレースホルダーを表示する方法がありませんか?というのが本記事のテーマになります。
セルにフォーカスを当てなくてもプレースホルダーを表示するために、ページ・プロパティのCSSのインラインに以下を記述しました。
ここで定義したCSSクラスplaceholder-enameを、列ENAMEの外観のCSSクラスに設定します。
tr.is-active .placeholder-ename:empty::before {
content: "従業員名を入力 例:山田太郎";
color: gray;
}
tr.is-active .placeholder-job:empty::before {
content: "ジョブを入力 例:SALESMAN";
color: gray;
}
同様に列JOBの外観のCSSクラスにplaceholder-jobを設定します。
以上の設定で行の追加を行なうと、フォーカスが当たっていないセルにCSSクラスで定義したプレースホルダーが表示されます。
今回の記事は以上になります。
簡単なアプリケーションですがエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-interactive-grid-placeholder.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完