本記事では、アプリのレコード一覧とレコード詳細画面の表示時に、フィールドの条件によってセルの背景色・文字色を変更する方法を説明します。
レコード一覧画面
フィールドの条件によって背景色・文字色が変更されています。
レコード詳細画面
「至急」の文字色が変更されています。
デモ環境で実際に動作を確認できます。
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';
}
});
|
-
イベントハンドラーを登録する
-
レコード一覧画面を表示した後のイベント
-
レコード詳細画面を表示した後のイベント
-
フィールド要素を取得する
今回は、フィールドの条件に応じて背景色や文字色を変更する方法を紹介しました。
見た目を工夫することで、重要な情報をより分かりやすく表示できます。
ぜひ、デモ環境やご自身のアプリで試してみてください。
