レコード一覧とレコード詳細画面で条件書式を設定する

固定リンクがコピーされました

更新日：2025年07月23日

はじめに

固定リンクがコピーされました

本記事では、アプリのレコード一覧とレコード詳細画面の表示時に、フィールドの条件によってセルの背景色・文字色を変更する方法を説明します。

動作イメージ

固定リンクがコピーされました

レコード一覧画面

フィールドの条件によって背景色・文字色が変更されています。

レコード詳細画面

「至急」の文字色が変更されています。

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/66/

ログイン情報は cybozu developer networkデモ環境で確認してください。

カスタマイズを適用するアプリ

固定リンクがコピーされました

アプリストアの「総務への依頼受付」を使用します。

サンプルコード

固定リンクがコピーされました

次のJavaScriptのコードを参考に、sample.jsという名前で保存し、「JavaScript/CSSでカスタマイズ」に追加します。

 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


/*
 * conditional Formatting sample program
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  // レコード一覧画面の表示後にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する
  kintone.events.on('app.record.index.show', (event) => {
    const bgColor = '#fff8dc';
    const elStatus = kintone.app.getFieldElements('ステータス');
    const elUrgent = kintone.app.getFieldElements('Urgent');

    for (let i = 0; i < elStatus.length; i++) {
      const record = event.records[i];
      elStatus[i].style.backgroundColor = bgColor;

      switch (record.ステータス.value) {
        case '未着手':
          elStatus[i].style.color = '#ff0000'; // 文字色を赤にする
          break;
        case '処理中':
          elStatus[i].style.color = '#0000ff'; // 文字色を青にする
          break;
        default:
          elStatus[i].style.color = '#0000ff'; // 文字色を青にする
          break;
      }

      if (record.Urgent.value[0] === '至急') {
        elUrgent[i].style.color = '#ff0000';
        elUrgent[i].style.fontWeight = 'bold';
      }
    }
  });

  // レコード詳細画面の表示後にフィールド値に応じて文字色を変更する
  kintone.events.on('app.record.detail.show', (event) => {
    const elUrgent = kintone.app.record.getFieldElement('Urgent');
    if (event.record.Urgent.value[0] === '至急') {
      elUrgent.style.color = '#ff0000';
      elUrgent.style.fontWeight = 'bold';
    }
  });
})();

サンプルコードの解説

固定リンクがコピーされました

一覧画面に表示されているレコードに対して繰り返し処理を行い、ステータスフィールドの背景色を設定しています。

17
18
19
20


    for (let i = 0; i < elStatus.length; i++) {
      const record = event.records[i];
      elStatus[i].style.backgroundColor = bgColor;
      ・・・

ステータスの値に応じて、文字色を設定しています。

21
22
23
24
25
26
27
28
29
30
31


      switch (record.ステータス.value) {
        case '未着手':
          elStatus[i].style.color = '#ff0000'; // 文字色を赤にする
          break;
        case '処理中':
          elStatus[i].style.color = '#0000ff'; // 文字色を青にする
          break;
        default:
          elStatus[i].style.color = '#0000ff'; // 文字色を青にする
          break;
      }

「至急」フィールドにチェックが入っている場合、文字色を変更します。

33
34
35
36


      if (record.Urgent.value[0] === '至急') {
        elUrgent[i].style.color = '#ff0000';
        elUrgent[i].style.fontWeight = 'bold';
      }

レコード詳細画面で、フィールドの値に応じて文字色を変更しています。

41
42
43
44
45
46
47


  kintone.events.on('app.record.detail.show', (event) => {
    const elUrgent = kintone.app.record.getFieldElement('Urgent');
    if (event.record.Urgent.value[0] === '至急') {
      elUrgent.style.color = '#ff0000';
      elUrgent.style.fontWeight = 'bold';
    }
  });

使用したAPI

固定リンクがコピーされました

おわりに

固定リンクがコピーされました

今回は、フィールドの条件に応じて背景色や文字色を変更する方法を紹介しました。
見た目を工夫することで、重要な情報をより分かりやすく表示できます。
ぜひ、デモ環境やご自身のアプリで試してみてください。

このTipsは、2025年7月版kintoneで動作を確認しています。

kintone API

一覧画面のカスタマイズ