はじめに
プリザンターでサーバスクリプトやスクリプトを使用する際に使用する項目名。特に必要となる物理名は画面で一発で確認する方法がなく、ブラウザの開発者ツールなどで見るのが一般的です。
ただこの方法だとマウスホバーや要素の直線の必要があり一発で確認する方法がありません。今回は、画面にわかりやすく表示させる方法を紹介します。
要素をみてみよう
まずは編集画面の要素が実装どうなっているかを見てみます。
<!-- 添付ファイル項目以外 -->
<div id="Results_TitleField" class="field-wide">
<p class="field-label">
<label for="Results_Title" class="required">子タイトル</label>
</p>
<div class="field-control">
<div class="container-normal">
<input
id="Results_Title"
name="Results_Title"
class="control-textbox focus valid"
type="text"
value="12 - コピー - copy - copy"
placeholder="子タイトル"
data-validate-required="1"
data-validate-maxlength="1024"
aria-invalid="false">
</div>
</div>
</div>
<!-- 添付ファイル項目 -->
<div id="Results_AttachmentsAField" class="field-wide">
<p class="field-label">
<label>添付ファイルA</label>
</p>
<div class="field-control">
<div class="container-normal">
<input
id="Results_AttachmentsA"
name="Results_AttachmentsA"
data-name="AttachmentsA"
class="control-attachments"
value="[]"
type="hidden">
<div
data-name="AttachmentsA"
data-action="binaries/multiupload"
id="AttachmentsA.upload"
class="control-attachments-upload">ファイルをドラッグ＆ドロップしてください
<input
id="AttachmentsA.input"
class="hidden"
type="file"
multiple="multiple">
</div>
<div id="AttachmentsA.items" class="control-attachments-items"></div>
<div style="display: none; " id="AttachmentsA.status">
<div id="AttachmentsA.progress" class="progress-bar">
<div></div>
</div>
<div id="AttachmentsA.abort" class="abort">キャンセル</div>
</div>
</div>
</div>
</div>
関係のあるところだけ抜き出しています。今回は簡単に実装したいので、CSSで表示させることを念頭に要素を見てみます。
スタイルを作ってみる
項目名を表示しているのは#(サイト種別)_(物理名)Field .field-label lableになります。このlabel、属性にforを持っていますがその中に物理名が格納されています。これを疑似要素を使って、本来のラベルの後ろに表示させてみましょう。疑似要素と既にある存在を組み合わせて使うとなると鉄板はattrですよね。ということは、作ってみたCSSはこちらになります。
[id$="Field"] p.field-label label::after {
content: ' (' attr(for) ')';
color: gray
}
これを適用してみると次の様な表示になります。
いい感じに表示されていますね。ただし、これだとforを持たない場合でも疑似要素が表示されてしまっている＆読み取り専用項目だと表示されていないので、ちょっと変更を加えます。
[id$="Field"] {
--field-name: attr(id);
p.field-label label::after {
content: ' (' var(--field-name) ')';
color: gray
}
}
そもそもの項目フィールドの外側に付与されているIDを使っています。これを適用してみると次の様な表示になります。
どの項目にも全て表示させることができました。ただこれをそのまま拡張スタイルなどに入れてしまうと全てのユーザに表示されてしまうという問題が発生します。表示できるユーザに制限を加えてみます。
:root:has(#UserId[value="3"]) {
[id$="Field"] {
--field-name: attr(id);
p.field-label label::after {
content: ' (' var(--field-name) ')';
color: gray
}
}
}
やっていることはとても簡単で$p.userIdが設定されている部分に表示したいユーザIDが格納されている(=表示したいユーザがログインしている)ときに表示する様に条件を加えただけです。所属部門、たとえばIT部門などを組織で括って管理をしているようという場合は、#DeptIdに書き換えてvalueに組織IDを指定してあげれば組織単位で表示制御をさせることも出来ます。
まとめ
編集画面で項目の物理名を表示させる方法を紹介しました。この表示がある/ないでは開発効率が大きく変わってきます。皆さんも是非試してみてください。
