【kintone】フィールドを値に応じて装飾

上図のように、車検満了日 まで1ヶ月を切っている車両を黄色く
車検満了日 を過ぎている車両を赤く見せて警告するには
条件書式プラグインを以下のように設定すればいい。

---

ただし、このプラグインだと 車検実施日 を入力したら警告を消すなどの設定はできない。

装飾の可否を複数の条件に基づいて判断したり、月ごとの日数の違いを考慮するといった
場合には、Luxonと下記のようなカスタマイズが必要になる。

フィールド要素を取得するAPIは
一覧画面で使えるものが kintone.app.getFieldElements
詳細画面と印刷画面で使えるものが kintone.app.record.getFieldElement
となっており、非常に紛らわしいので注意。

(() => {
  'use strict';

  // [車検満了日]を装飾する関数
  const applyExpiryColorIfNeeded = (element, record) => {
    if (!element) return;

    const { 車検満了日: { value: expiryDate }, 車検実施日: { value: implementDate } } = record;
    
    // [車検満了日]が存在し[車検実施日]が未入力の場合のみ実行
    if (!expiryDate || implementDate) return;

    const today = luxon.DateTime.now();
    const oneMonthLater = today.plus({ months: 1 });
    const expiryDateTime = luxon.DateTime.fromISO(expiryDate);
    
    // [車検満了日]が過去の場合 → 背景色赤
    if (expiryDateTime < today.startOf('day')) {
      element.style.fontWeight = 'bold';
      element.style.backgroundColor = '#F80931';
      element.style.color = '#FBF8F8';
    }
    // [車検満了日]が今日から1ヶ月以内の場合 → 背景色黄
    else if (expiryDateTime <= oneMonthLater) {
      element.style.backgroundColor = '#E0F00D';
      element.style.color = '#000000';
    }
  };

  // 一覧画面を表示したときの処理
  kintone.events.on('app.record.index.show', (event) => {
    // 一覧のメニューの右側の要素を取得
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();
    
    // 現在日付の表示を追加(重複追加を防ぐためIDでチェック)
    if (!document.getElementById('current-date-display')) {
      // 現在日付を「yyyy年MM月dd日」形式でフォーマット
      const formattedDate = luxon.DateTime.now().toFormat('yyyy年MM月dd日');
      const dateElement = document.createElement('div');

      // 現在日付のスタイルとIDを設定
      dateElement.id = 'current-date-display';
      dateElement.style.cssText = 'padding: 10px 20px; font-size: 14px; color: #333';
      dateElement.textContent = `${formattedDate}現在`;
      headerSpace.appendChild(dateElement);
    }

    // 一覧の各レコードに対して[車検満了日]の装飾を実行
    const expiryElements = kintone.app.getFieldElements('車検満了日');

    event.records.forEach((record, index) => {
      applyExpiryColorIfNeeded(expiryElements[index], record);
    });

    return event;
  });

  // 詳細画面か印刷画面が表示されたときも同様に装飾
  kintone.events.on(['app.record.detail.show', 'app.record.print.show'], (event) => {
    const element = kintone.app.record.getFieldElement('車検満了日');
    applyExpiryColorIfNeeded(element, event.record);

    return event;
  });

})();

---

上記のカスタマイズをすると 車検実施日 入力済のレコードは警告色を出さなくなる。