【フォームブリッジ】テーブルのレコードの背景を条件によって色を設定したい

kintone カスタマイズ
1

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

kviewerとフォームブリッジを連携させて、利用しております。

フォームブリッジでテーブル項目にレコードを追加した際に、

日付が当日分のみテーブルレコードの背景色を設定することは可能でしょうか？

 

2

QG.Kさん

こんにちは。

 

各行の日付を比較して、同日であれば、<tr>要素のbackgroundColorを変更することで実装できます。

行の追加・変更・値変更のタイミングでも処理が必要であれば、それぞれのイベント内で定義してみてください。

(function() {

  "use strict";

fb.events.form.mounted = [function(state) {

    for (let i = 0; i < state.record.テーブル.value.length; i++) {
      if (new Date(state.record.テーブル.value[i].value.日付.value).toDateString() == new Date().toDateString()) {
      // ヘッダーを考慮して +1
        fb.getElementByCode('テーブル').getElementsByTagName('tr')[i + 1].style.backgroundColor = '#ff0000';
      }
    }
    
    return state;

  }];

})();
3

koichi様

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

ご提示いただいたコードで無事に実装することができました。

具体的には下記イベント時で実装しました。

fb.events.fields.{fieldCode}.fields.{fieldCodeInTable}.changed

 

1点確認ですが、確認画面でも同様の機能を実装する場合のイベントは下記でよろしいでしょうか？

設定してみましたが、背景色が設定されず・・・

fb.events.confirm.submit

追加での質問となり恐縮ですが、ご教授いただけると幸いです。

4

確認画面のDOMが作成された後「fb.events.confirm.mounted」が良いです。

但し、確認画面では、fb.getElementByCode(‘フィールド名’)が使えないので

document.getElementsByTagNameなどで要素を取得するしかないですね。

 

テーブルが1つしかなければ、以下のように書けます。

2つ以上ある場合は、添え字[0]を変えてください。

 

fb.events.confirm.mounted = [function(state) {

    for (let i = 0; i < state.record.テーブル.value.length; i++) {
      if (new Date(state.record.テーブル.value[i].value.日付.value).toDateString() == new Date().toDateString()) {
        // ヘッダーがあるため +1
        document.getElementsByTagName('table')[0].getElementsByTagName('tr')[i + 1].style.backgroundColor = '#ff0000';
      }
  }

  return state;

  }];
5

koichi様

確認画面での背景色変更も、ご提示いただいたコード適用で無事に実装することできました！

早急なご回答誠にありがとうございます！

6

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。