対応担当者にログインユーザーが含まれている場合に、レコード一覧で該当レコードの背景色を変更しています。
その他、次の機能も追加しています。
- 対応状況が「完了」以外で、「期限」が過ぎているフィールド値を赤文字、太字にします。
- 対応状況が「完了」以外で、「期限」が本日より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によるカスタマイズ」画面でそれぞれ設定した例を紹介します。
-
イベントハンドラーを登録する
-
ログインユーザーの情報を取得する
-
フィールド要素を取得する
-
クエリの書き方
-
kintone REST APIリクエストを送信する
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/58/
ログイン情報は
cybozu developer networkデモ環境
で確認してください。