条件分岐がある中でも、javascriptを適用させたい

kintone カスタマイズ
1

お世話になります。

最近書き込んだばかりですがご教授いただければ幸いです。

 

背景・実現したいこと

条件分岐がある中でも、javascriptを適用させたい

 

エラー情報

ご教授いただき、下記内容で特定のラベルの背景色を変更することができました。

ただ最初からラベルがすべて表示されていれば大丈夫でしたが、こちら条件分岐を行い、フォームを開いたときにラベルがない状態ですとjavascriptが適用されません。 

条件分岐により最初にラベルがなくても下記コードを反映させる方法はないでしょうか。

何卒宜しくお願い致します。

 

利用したソースコード

(function () {
'use strict';
fb.events.form.mounted.push(function (state) {
var fieldCodes = ['label_18_2', 'label_a',
'label_16_2', 'label_6_2', 'label_c', 'label_5_2',
'label_d', 'label_1_2', 'label_1_4', 'label_2_2', 'label_2_4',
'label_3_2', 'label_4_3', 'label_4_4', 'label_4_5',
'label_4_12', 'label_4_6', 'label_4_7', 'label_4_8',
'label_4_9', 'label_4_10', 'label_4_11', 'label_55_2',
'label_66_2', 'label_8_2', 'label_9_2', 'label_10_2',
'label_10_3', 'label_10_4', 'label_10_5', 'label_10_7',
'label_12_2', 'label_13_2', 'label_14_2', 'label_14_3',
'label_14_5', 'label_21_2', 'label_23_1', ]; //ラベルフィールドのフィールドコード
fieldCodes.forEach(function (fieldCode) {
var targetElement = fb.getElementByCode(fieldCode);
// ...
  targetElement.style.backgroundColor = "#d4f8ff";
// ...
});

 return state;
});
}());
2

t_moriさん

お世話になっております。

targetElementがnullとなった場合は、returnして以降の処理を行わないようにすると良いかと思います。

// ...
fieldCodes.forEach(function (fieldCode) {
 vartargetElement = fb.getElementByCode(fieldCode);
if (!targetElement) {
return;
}
//...
});
// ...

条件分岐でフィールドの表示に変更があった際に再度処理を行うには、「fb.events.fields.{fieldCode}.mounted イベント」か「fb.events.fields.{fieldCode}.changed イベント」あたりで同様の処理を実装すればよいかと思います。
https://form.kintoneapp.com/help/customize

注意書きに「※内部的に状態は変更されますが、DOMに変更が反映されない場合があります。」とあるので、完全に同じ記述では実装できないかもしれません。
その場合は、MutationObserverなどでDOMの監視をすることになるかと思います。

3

江田篤史様

ご回答ありがとうございます。

一度いただいた情報で試してみます。

ご教授いただきありがとうございます。