ラジオボタンで別フィールドの文字色と背景色を変更する（複数対応）

やりたいこと

一覧表とレコード詳細画面で、ラジオボタンの値に応じて複数フィールドの文字色と背景色を変更したい。
今回は、事例としてタスク管理アプリのステータス（ラジオボタン）の値が「未着手」「作業中」「完了」の3種類で、ステータス（ラジオボタン）の値によって複数フィールドの文字色と背景色を変更してみます。

デモ画面

デモ画面では、ステータス（ラジオボタン）の値で、日付、数値、文字列の3つのフィールドの文字色と背景色が変更されています。

複数フィール殿文字色と背景色変更

複数フィールドの文字色・背景色変更のJavascriptコード

/* ラジオボタンの値で複数フィールドの色変更 */
(() => {
    'use strict';

    // 初期設定
    const STATUS_FIELD_CODE = 'RADIO_BUTTON';
    const RELATED_FIELD_CODES = [STATUS_FIELD_CODE ,'FIELD_CODE_1', 'FIELD_CODE_2', 'FIELD_CODE_3'];

    // ステータス値：文字色と背景色のマッピング
    const STATUS_STYLES = {
        '未着手': { color: 'red', backgroundColor: 'yellow' },
        '作業中': { color: 'black', backgroundColor: 'orange' },
        '完了': { color: 'black', backgroundColor: 'lightblue' }
    };

    // フィールドのスタイルを変更する共通関数
    const changeFieldStyle = (fieldElement, statusValue) => {
        const style = STATUS_STYLES[statusValue];
        if (style) {
            fieldElement.style.color = style.color;
            fieldElement.style.backgroundColor = style.backgroundColor;
        }
    };

    // レコード詳細画面での処理
    const handleDetailPage = (event) => {
        const statusValue = event.record[STATUS_FIELD_CODE].value;
        RELATED_FIELD_CODES.forEach((fieldCode) => {
            const fieldElement = kintone.app.record.getFieldElement(fieldCode);
            if (fieldElement) {
                changeFieldStyle(fieldElement, statusValue);
            }
        });
    };

    // レコード一覧画面での処理
    const handleIndexPage = (event) => {
        event.records.forEach((record, index) => {
            const statusValue = record[STATUS_FIELD_CODE].value;
            RELATED_FIELD_CODES.forEach((fieldCode) => {
                const fieldElements = kintone.app.getFieldElements(fieldCode);
                if (fieldElements && fieldElements[index]) {
                    changeFieldStyle(fieldElements[index], statusValue);
                }
            });
        });
    };

    // イベントリスナーの宣言
    kintone.events.on('app.record.detail.show', handleDetailPage);
    kintone.events.on('app.record.index.show', handleIndexPage);
})();

初期設定の部分でラジオボタンのフィールドコード（STATUS_FIELD_CODE）設定と、ラジオボタンの値変更で色を変えたいフィールドコード（RELATED_FIELD_CODES）を複数指定できます。
ラジオボタンのステータス値と対応する文字色と背景色の指定を、ステータス値：文字色と背景色のマッピングの連想配列で指定します。

    // 初期設定
    const STATUS_FIELD_CODE = 'RADIO_BUTTON';
    const RELATED_FIELD_CODES = [STATUS_FIELD_CODE ,'FIELD_CODE_1', 'FIELD_CODE_2', 'FIELD_CODE_3'];

    // ステータス値：文字色と背景色のマッピング
    const STATUS_STYLES = {
        '未着手': { color: 'red', backgroundColor: 'yellow' },
        '作業中': { color: 'black', backgroundColor: 'orange' },
        '完了': { color: 'black', backgroundColor: 'lightblue' }
    };

色指定は、16進数のカラーコードでも指定できます。
カラーコードは以下のリンクを参照して下さい。

WEB色見本 原色大辞典 - HTMLカラーコード

kintoneのフィールドの要素情報の変更は、レコード一覧、レコード一詳細、レコード印刷画面だけで利用できます。
（新規登録、編集画面では、フィールド色の変更は反映されません）

ラジオボタン値でフィールド属性を操作する方法は、以下の記事も参考にしてください。ドロップダウンリストでも同じように動作します。

---

今回のカスタマイズは、以前公開した以下の記事のリメイク版です。
前回の記事との違いは、複数フィールドの文字色と背景色が操作できるようになったことです。
ラジオボタンで単体フィールドの文字色・背景色を変更するだけなら、以下の記事の内容の方が設定方法は簡単です。