いつもお世話になっております。
入力フォームにて、指定の位置の背景色を変えるカスタマイズをしたいと考えております。
↓この図で、色で囲んだ部分（4箇所）の背景色を変更するようなイメージです。
※アプリストアの「物件契約管理」アプリを例にしております。
これを実現するには、色の開始地点と終了地点にスペースフィールドを配置してコードを書いたり、フォームレイアウトを取得するAPIを使用したりするのでしょうか？
恐れ入りますが、お知恵を拝借いただけますと助かります。
よろしくお願いいたします。
藤原さん
cstapの瀧ヶ平です。
実装するとしたら、グループフィールドを用意して、グループフィールドごとにDOM要素を取得して背景色を取得する形になると思います。
ただ、現在はグループフィールドはkintoneのAPIでは取得できないので、グループフィールドの中に入っている要素を kintone.app.record.getFieldElement関数で取得して、 その親要素のさらに親要素の背景色を変更するなど工夫が必要です。
kintone.app.record("グループの中のフィールド").parentNode.parentNode.style.color = "#ff0000";
のような形ですね。もちろんkintoneの今後のアップデートによってはDOM構造が変わるかもしれないので注意が必要です。
参考になりますでしょうか
藤原さん
もう一つの案としては、グループにCSSで色付けすると似た感じになると思います。
グループの階層構造は設定できませんので、外枠は無理です。
外枠を表示するには、DOM構造を変更する必要がありますので、お勧めしません。
CSS は、下記のようになると思います。
field-nnnnnnn は、グループに付けられた番号を調べて設定してください。
入力エリア枠なども調整すれば、より近くなると思います。
.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-nnnnnnn {
border-color: #572e2e;
background-color: #f3cdcd;
}
.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-nnnnnnn * {
background-color: #f3cdcd;
}
cstap滝ヶ平様、rex0220様
ご返答いただきありがとうございます。
どちらかと言うと外枠の色付けがメインだったのですが、こちらは無理なのですね……。
グループの色付け、参考になりました。活用させていただきます。
ありがとうございました。