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

目次

概要

アプリのレコード一覧とレコード詳細画面の表示時に、フィールドの条件によってセルの背景色、文字色を変更します。

完成形

レコード一覧

レコード詳細画面

下準備

サンプルプログラム

サンプルプログラムの解説は、こちらの チュートリアル記事にあります。
「コードの意味は理解できていない」「変更を加えたいけど、どの部分を修正すればいいかわからない」 と感じている方は、ぜひチュートリアル記事を確認してみてください。

プログラム

 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
/*
 * 条件書式の文字装飾のサンプルプログラム
 * Copyright (c) 2022 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';
    }
  });
})();
  • エディターにサンプルプログラムをコピーし、任意のファイル名で、文字コードを「UTF-8」にして保存します。
  • 準備したアプリの設定画面で、保存したファイルを読み込みます。
  • アプリの設定を完了し、レコード一覧を表示します。

使用したAPI

  1. イベントハンドラーを登録する
  2. レコード一覧画面を表示した後のイベント
  3. レコード詳細画面を表示した後のイベント
  4. フィールド要素を取得する

デモ環境

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

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