1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 非推奨: この書き方は setFieldStyle() を使った実装への置き換えを推奨します
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const deadline = new Date(event.record['期限日'].value);
    const today = new Date();

    if (deadline < today) {
      // kintoneのDOM要素をクラス名で直接取得
      const fields = document.getElementsByClassName('control-value-gaia');
      for (const field of fields) {
        if (field.textContent.includes(event.record['期限日'].value)) {
          field.style.backgroundColor = '#ffcccc';
          field.style.color = '#cc0000';
          field.style.fontWeight = 'bold';
        }
      }
    }

    return event;
  });
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 非推奨: この書き方は setFieldStyle() を使った実装への置き換えを推奨します
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const deadline = new Date(event.record['期限日'].value);
    const today = new Date();

    if (deadline < today) {
      // getFieldElement()でフィールドのDOM要素を取得
      const fieldEl = kintone.app.record.getFieldElement('期限日');
      if (fieldEl) {
        fieldEl.style.backgroundColor = '#ffcccc';
        fieldEl.style.color = '#cc0000';
        fieldEl.style.fontWeight = 'bold';
      }
    }

    return event;
  });
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', async (event) => {
    const deadline = new Date(event.record['期限日'].value);
    const today = new Date();

    if (deadline < today) {
      await kintone.app.record.setFieldStyle('期限日', {
        content: {
          backgroundColor: '#ffcccc',
          color: '#cc0000',
          fontWeight: 'bold'
        }
      });
    }

    return event;
  });
})();

1
2
3
4
5
6
7
8
9

// 特定のプロパティだけ初期化
await kintone.app.record.setFieldStyle('期限日', {
  content: {
    backgroundColor: 'DEFAULT' // 背景色だけ戻す
  }
});

// フィールド全体のスタイルを初期化
await kintone.app.record.setFieldStyle('期限日', 'DEFAULT');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const spaceEl = kintone.app.record.getSpaceElement('space');
    if (!spaceEl) {
      return event;
    }

    const button = document.createElement('button');
    button.textContent = 'ハイライト切替';
    button.onclick = async () => {
      const currentStyle = await kintone.app.record.getFieldStyle('重要度');
      const labelColor = currentStyle?.label?.color;
      const isHighlighted = labelColor !== undefined && labelColor !== 'DEFAULT';

      if (isHighlighted) {
        await kintone.app.record.setFieldStyle('重要度', 'DEFAULT');
      } else {
        await kintone.app.record.setFieldStyle('重要度', {
          label: {
            color: '#cc0000',
            fontWeight: 'bold',
            textDecoration: 'underline'
          }
        });
      }
    };

    spaceEl.appendChild(button);
    return event;
  });
})();