アプリのレコード一覧とレコード詳細画面の表示時に、フィールドの条件によってセルの背景色、文字色を変更します。
レコード一覧
レコード詳細画面
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」にして保存します。
- 準備したアプリの設定画面で、保存したファイルを読み込みます。
- アプリの設定を完了し、レコード一覧を表示します。
-
イベントハンドラーを登録する
-
レコード一覧画面を表示した後のイベント
-
レコード詳細画面を表示した後のイベント
-
フィールド要素を取得する
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/66/
ログイン情報は
cybozu developer networkデモ環境で確認してください。