ログインユーザーが担当しているレコードに背景色をつける

目次

概要

対応担当者にログインユーザーが含まれている場合に、レコード一覧で該当レコードの背景色を変更しています。
その他、次の機能も追加しています。

  • 対応状況が「完了」以外で、「期限」が過ぎているフィールド値を赤文字、太字にします。
  • 対応状況が「完了」以外で、「期限」が本日より5日前の場合、フィールド値を青文字にします。
  • 対応状況が「完了」以外で、ログインユーザーの「期限」が過ぎているレコード数をダイアログで表示します。

完成形

下準備

サンプルプログラム

サンプルプログラムでは、 Cybozu CDN の利用、JavaScriptのサンプルを紹介します。

PC用のJavaScriptファイル

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、 Cybozu CDN から次のライブラリを指定します。

  • Luxon
    https://js.cybozu.com/luxon/3.0.4/luxon.min.js(version 3.0.4を利用)

JavaScriptサンプル

次のサンプルプログラムをエディターにコピーして次の形式で保存します。

  • ファイル名:「sample-limitdatecolor.js」
  • 文字コード:「UTF-8」、BOMなし。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
  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
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
/*
 * ログインユーザーが担当しているレコードに背景色をつけるサンプルプログラム
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  const LIMIT_DAY = 5; // 期限日
  const LOGIN_COLOR = '#e5f0ff'; // ログインユーザのフィールド色

  const getRecords = () => {
    // クエリ文の設定
    const qryInfo =
      'Person in (LOGINUSER()) and Status not in ("完了") and LimitDay < TODAY()';
    const body = {
      app: kintone.app.getId(),
      query: qryInfo
    };
    // 非同期リクエストを行う
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body);
  };

  const checkIndexRecords = (event) => {
    const user = kintone.getLoginUser(); // ログインユーザ情報
    const date = luxon.DateTime.local();
    const today = date.toFormat('yyyy-MM-dd'); // 本日日付フォーマット処理

    // 一覧の要素を取得
    const elCustomer = kintone.app.getFieldElements('Customer'); // 顧客名
    const elQType = kintone.app.getFieldElements('QType'); // 問い合わせ種別
    const elStatus = kintone.app.getFieldElements('Status'); // 対応状況
    const elLimitDay = kintone.app.getFieldElements('LimitDay'); // 期限
    const elPerson = kintone.app.getFieldElements('Person'); // 対応担当者
    const elDetail = kintone.app.getFieldElements('Detail'); // 詳細

    // レコード期限日と担当者チェック処理
    for (let i = 0; i < event.records.length; i++) {
      const record = event.records[i];

      // 対応担当者のArrayから担当者名を抽出
      const recperson = record.Person.value;
      const personList = [];
      for (let j = 0; j < recperson.length; j++) {
        personList.push(recperson[j].name);
      }

      // 担当者チェック
      if (personList.indexOf(user.name) > -1) {
        // 対応担当者がログインユーザの場合はフィールド色を変更する
        if (elCustomer) {
          elCustomer[i].style.backgroundColor = LOGIN_COLOR;
        }
        if (elQType) {
          elQType[i].style.backgroundColor = LOGIN_COLOR;
        }
        if (elStatus) {
          elStatus[i].style.backgroundColor = LOGIN_COLOR;
        }
        if (elLimitDay) {
          elLimitDay[i].style.backgroundColor = LOGIN_COLOR;
        }
        if (elPerson) {
          elPerson[i].style.backgroundColor = LOGIN_COLOR;
        }
        if (elDetail) {
          elDetail[i].style.backgroundColor = LOGIN_COLOR;
        }
      }

      // 期限日の取得
      const deadlineDate = luxon.DateTime.fromISO(record.LimitDay.value);
      // 未完了レコードの期限日チェック
      if (record.Status.value !== '完了') {
        if (!elLimitDay) {
          continue;
        }

        // 期限切れレコードを赤字にする
        if (deadlineDate.toFormat('yyyy-MM-dd') < today) {
          elLimitDay[i].style.color = 'red';
          elLimitDay[i].style.fontWeight = 'bold';

          // 期限が**日後までのレコードを青字にする
        } else if (deadlineDate.minus({days: LIMIT_DAY}).toFormat('yyyy-MM-dd') <= today) {
          elLimitDay[i].style.color = 'blue';
        }
      }
    }
  };

  // レコード一覧の表示時にフィールド値の条件に応じて、文字色とフィールドの背景色を変更する
  kintone.events.on('app.record.index.show', (event) => {
    checkIndexRecords(event);
    getRecords().then((resp) => {
      if (resp.records.length > 0) {
        // ログインユーザ情報
        const user = kintone.getLoginUser();
        // ログインユーザの未完了で期限切れのレコード数を表示する
        alert(`期限が切れている ${user.name} さんのレコードが ${resp.records.length}件あります`);
      }
    });
  });
})();

設定した画面

「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。

参考ページ

  1. イベントハンドラーを登録する
  2. ログインユーザーの情報を取得する
  3. フィールド要素を取得する
  4. クエリの書き方
  5. kintone REST APIリクエストを送信する

デモ環境

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

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

information

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