動機
kintoneアプリを作成していて、画面の項目にcssを適用したいときがある。
個人的にjavascriptとcssを合わせて比較的シンプルに適用する方法ではないかと思うので備忘のため記録に残す。
注意
kintoneの仕様が変わったら使えなくなる可能性がある。
画面イメージ
２つのテキストボックスにスタイルを適用する例で示す。
その１ テキストボックスにスタイルを適用
デベロッパーツールでHTMLの入力項目を確認するとclass="input-text-cybozu"とある。
input-text-cybozu目掛けてスタイルを適用すれば良さそう。
やってみる
背景を黄色にしてみる。
.input-text-cybozu {
background-color: yellow !important; // !importantを付けないと上書きできない
}
ファイルに保存して、アプリに登録する。
登録手順
１． JavaScript / CSSでカスタマイズを開く
２． PC用のCSSファイルの「アップロードして追加」で作成したCSSファイルを登録する。
３． 保存 & アプリの更新
４． 確認
その２ 特定の項目にスタイルを適用
デベロッパーツールでHTMLの入力項目を確認する。
なにやらテキストボックスの要素に項目を一意に特定できそうな番号がある。
この番号目掛けてスタイルを適用すれば良さそう。
やってみる
# 31_5519913-:1d-text {
background-color: yellow !important; // !importantを付けないと上書きできない
}
CSSの登録手順は、その１と同様のため、割愛
１． 確認
変わらず。。。
id属性が数値から始まる場合、属性セレクターで書く必要がある模様。
[id="31_5519913-:1d-text"] {
background-color: yellow !important; // !importantを付けないと上書きできない
}
２． 再確認
[id="31_5519913-:1d-text"] {
background-color: yellow !important; // !importantを付けないと上書きできない
}
できた！
その３ javascriptと絡めてCSSを伝わりやすい定義で作る！
その２でkintoneでは１つの要素を特定する時、一意の番号が払い出されていることがわかった。
確認すると、同じ番号は、４箇所（field-xxxx, label-xxxx, value-xxxx, 31_xxxx:1d-text）登場している。
kintoneはcybozu.data.page.FORM_DATA.schema.table.fieldListで画面項目の一覧が取得できる。
上記を踏まえて、javascriptとcssでスタイルを適用する。
javascript
追加、更新、詳細画面を表示した時のイベントを定義する。
(() => {
"use strict";
kintone.events.on(
[
"app.record.detail.show",
"app.record.create.show",
"app.record.edit.show",
],
(event) => {
const fieldArray = Object.values(
cybozu.data.page.FORM_DATA.schema.table.fieldList
).map((field) => ({ [field.var]: field.id }));
const fields = Object.assign({}, ...fieldArray.map((field) => field));
const nameId = fields["名前"];
const element = document.getElementsByClassName(`field-${nameId}`);
element[0].classList.add("required");
return event;
}
);
})();
css
.required {
background-color: pink;
}
.required input {
background-color: yellow !important;
}
１．CSSの登録手順は、その１と同様のため割愛
javascriptの登録手順はCSSと同様。
２． 確認
できた。
htmlを確認すると、field-5519913にrquiredが設定されている。
javascriptのコーディングが入るが、CSSで意味のわかるclass属性で定義ができるので、個人的にわかりやすくなったかな。
javascript lessでできるようにするには．．．
プラグインにすればいいのだろうか？？
まだ知識が浅くてよくわからない。