フォームブリッジ　特定複数のラベルに背景色をつけたい

kintone カスタマイズ
1

背景・実現したいこと

複数の指定ラベルの背景色を変更したいです。

https://developer.cybozu.io/hc/ja/community/posts/900003344363-FormBridge-%E3%83%A9%E3%83%99%E3%83%AB%E9%A0%85%E7%9B%AE%E3%81%AE%E4%BD%99%E7%99%BD%E3%82%92%E7%8B%AD%E3%82%81%E3%81%9F%E3%81%84

こちらの質問の一つ目のコードを真似をして、一つのラベルの背景色を変えることはできました

二つ目のコードを真似して複数ラベルの背景色を変えようとしたところ反映されず困っています。

諦めて一つ目のコードを38個作成して読み込ませるもうまくいきませんでした。

ド初心者でcssでフォントの色を変えられるようになったレベルです

 

エラー情報

反映されない

利用したソースコード

(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);
    var targetLabel = targetElement.getElementsByTagName('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')[0];
    var targetRow = targetElement.parentNode;
    var nextRow = targetRow.nextElementSibling;

    targetElement.style.backgroundColor = "#d4f8ff" ;
    // ...
  });

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

t_moriさん

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

サンプルが分かりづらかったかもしれませんね…

getElementsByTagName()にはDOMのタグ名である「label」を使います。
FormBridgeのフィールドコードとは関係がありません。

fb.events.form.mounted.push(function (state) {
  var fieldCodes = ['label1', 'label2']; //ラベルフィールドのフィールドコード
  fieldCodes.forEach(function (fieldCode) {
    var targetElement = fb.getElementByCode(fieldCode);
    var targetLabel = targetElement.getElementsByTagName('label')[0];
    var targetRow = targetElement.parentNode;
    var nextRow = targetRow.nextElementSibling;

    targetElement.style.paddingBottom = 0;
    // ...
  });

  return state;
});

もしそれでも動作しない場合は、下記などを参考にブラウザのコンソール画面にエラーが出ていないか確認すると良いと思います。
https://developer.cybozu.io/hc/ja/articles/207613916

3

江田篤史様

お返事ありがとうございます。とてもありがたいです。

ご指摘の通り、(getElementsByTagname)を(label)にして実行してみましたがやはりうまく動作しませんでした。

現在のコードとエラーを記載します

 

vue.runtime.esm.js:1888 TypeError: Cannot read property 'getElementsByTagName' of null
at サーベイスクリプト文字青化3.js:16
at Array.forEach (<anonymous>)
at サーベイスクリプト文字青化3.js:14
at user-state.ts:14
at Array.forEach (<anonymous>)
at user-state.ts:6
at Pa.callEvents (form.ts:186)
at vuex.esm.js:725
at vuex.esm.js:391
at Array.forEach (<anonymous>)
ze @ vue.runtime.esm.js:1888




(function () {
  'use strict';
  fb.events.form.mounted.push(function (state) {
 varfieldCodes = ['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) {
   vartargetElement = fb.getElementByCode(fieldCode);
   vartargetLabel = targetElement.getElementsByTagName('label')[0];
   vartargetRow = targetElement.parentNode;
   varnextRow = targetRow.nextElementSibling;
    targetElement.style.backgroundColor ="#d4f8ff";
   // ...
  });
 returnstate;
});
})();

 

また

https://developer.cybozu.io/hc/ja/community/posts/900003344363-FormBridge-%E3%83%A9%E3%83%99%E3%83%AB%E9%A0%85%E7%9B%AE%E3%81%AE%E4%BD%99%E7%99%BD%E3%82%92%E7%8B%AD%E3%82%81%E3%81%9F%E3%81%84

こちらに記載１つ目のコードも

getElementsByTagName()にlabelだけでなくlabel_1等を入力しないと動作しなかったです。

私がなにか間違えているのだと思いますが原因お分かりだったりしないでしょうか？

 

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

4

こちら原因がわかりました。フォームブリッジに条件分岐を指定しており、

初めから表示されているラベルを指定するとうまくいきますが、

条件によって表示が変わるラベルには適用されずエラーが出てしまっていたようです。

ご指摘ありがとうございました。