一覧表の種類別に列フイールドの背景色を変更する

やりたいこと

Kintoneのアプリにある複数のレコード一覧表を切り替える際に、注目して欲しい項目（列フィールド）の背景色を変更したい。
kintoneは、1つのアプリに絞り込みや並び替えの条件が異なるレコード一覧表を設定して切り替え表示することが可能です。
レコード一覧表を切り替えた時に、一覧表の種類によって列フィールドの背景色に好きな色を設定したいニーズに応えたカスタマイズ事例です。

デモ画面

デモ画面は、kintonアプリストアの「案件管理」アプリをサンプルデータを含めて作成してカスタマイズした例です。
案件一覧表ビューでは、「見込み時期」と「状態」の列を朱色で表示
確度Ａの案件ビューでは「確度」と「小計」の列を水色で表示
kintoneの案件ビューでは「状態」と「製品名」の列を黄色で表示する様にしています。

サンプルコード

デモ画面のカスタマイズを実装するサンプルコードは以下の通りです。
初期設定のVIEW_ID_MAPで列背景色を変更したいView_IDを複数設定して、FIELD_STYLE_MAPPINGで、ビューの種類別に背景色を変更したい列のフィールドコードと背景色のカラーコードを指定します。

/* 一覧表の列背景色を切り替えする */
(() => {
    'use strict';

    // 初期設定: フィールドコード、ビューID、背景色、ボックスシャドウを定義
    const VIEW_ID_MAP = {
        'VIEW_ID_1': 123456, // 案件一覧
        'VIEW_ID_2': 222222, // 確度Ａの案件
        'VIEW_ID_3': 333333  // kintone案件
    };

    const FIELD_STYLE_MAPPING = {
        [VIEW_ID_MAP.VIEW_ID_1]: {
            fields: ['見込み時期', '状態'],
            backgroundColor: '#ff6347',// 朱色
        },
        [VIEW_ID_MAP.VIEW_ID_2]: {
            fields: ['確度', '小計'],
            backgroundColor: '#87ceeb', // 水色
        },
        [VIEW_ID_MAP.VIEW_ID_3]: {
            fields: ['状態', '製品名'],
            backgroundColor: '#ffff00', // 黄色
        }
    };

    // 共通関数: フィールドの背景色を変更
    const changeFieldBackgroundColor = (fieldCode, color, boxShadow) => {
        const fieldElements = kintone.app.getFieldElements(fieldCode);
        if (fieldElements) {
            fieldElements.forEach((element) => {
                element.style.backgroundColor = color;
                element.style.boxShadow = boxShadow;
            });
        }
    };

    // レコード一覧画面のイベント
    kintone.events.on('app.record.index.show', (event) => {
        // 現在のビューIDを取得
        const viewId = event.viewId;

        // 背景色とフィールドコードを取得
        const fieldStyle = FIELD_STYLE_MAPPING[viewId];

        // フィールドが定義されている場合のみ処理を行う
        if (fieldStyle) {
            fieldStyle.fields.forEach((fieldCode) => {
                changeFieldBackgroundColor(fieldCode, fieldStyle.backgroundColor, fieldStyle.boxShadow);
            });
        }
        return event;
    });
})();

一覧表のViwe_IDの調べ方

Kintoneの一覧表のView_IDは、アプリの設定＞一覧表で、一覧表の編集画面を開いたURLの後ろにあるView＝XXXXXXの部分で調べることが出来ます。
（下図の青枠の中の赤い数字の部分です）

---

カスタマイズした感想

アプリの表示ビューは、ヘッダーの一覧表の選択値でしか分かりませんので、ビューが切り替わっていることに気が付かない方も多いようです。
一覧表を切り替え表示したら「いつもと画面と違う」「データが見つかりにくい」という問い合わせが多いというアプリ管理者の嘆きに応えるために、切り替えているビューの種類を視覚的に分かり易くすることが今回のカスタマイズの目的でした。

今回の方法の他に、アプリの一覧表にサブタイトルを付けるカスタマイズ例の記事も以前に紹介してします。

なお、フィールド値の条件によって背景色や文字色を変更したいカスタマイズの事例は、以下の記事をご参照ください。

今回も最後まで読んで頂いてありがとうございました。