アプリ編集画面で編集した値をハイライトしたい

kintone の構築／設計／運用
1

Kintone の編集画面において、ユーザーがフィールドの値を変更した場合にそのフィールドをハイライト（背景色を変える）するカスタマイズを試みておりますが、うまく動作できておりません。

条件:

  1. 編集画面でのみ動作する
  2. フィールドの値が初期値と異なる場合に、ハイライトする（例：背景色を黄色にする）
  3. 複数フィールド（文字列、数値、ラジオボタンなど）に対応したい

customineを使えば一つのフィールドずつ設定できそうなことはわかっていますが、
フィールド数も多いのでできるだけjavascriptで対応しようとしています。
どうすればうまくいくのか、もうすでに試されていることはいるのかそういった情報も歓迎です。

コード↓

(function () {
  "use strict";

  // 初期値を保持するオブジェクト（グローバル）
  const originalValues = {};
  let eventHandlersSet = false; // イベントを1回だけ登録するためのフラグ

  // 編集画面の表示イベント
  kintone.events.on('app.record.edit.show', async function (event) {
    const record = event.record;

    // 初期値を保存
    for (const fieldCode in record) {
      originalValues[fieldCode] = record[fieldCode].value;
    }

    // 一度だけイベント登録
    if (!eventHandlersSet) {
      eventHandlersSet = true;

      try {
        const resp = await kintone.api(
          kintone.api.url('/k/v1/app/form/fields', true),
          'GET',
          { app: kintone.app.getId() }
        );

        const fieldCodes = Object.keys(resp.properties);

        // 各フィールドに対して変更イベントを登録
        fieldCodes.forEach(fieldCode => {
          kintone.events.on(`app.record.edit.change.${fieldCode}`, function (e) {
            const current = e.record[fieldCode]?.value;
            const original = originalValues[fieldCode];

            const el = kintone.app.record.getFieldElement(fieldCode);
            if (!el) return e;

            if (current !== original) {
              el.style.backgroundColor = '#ffffcc'; // 変更された場合にハイライト
            } else {
              el.style.backgroundColor = ''; // 元に戻したらハイライト解除
            }

            return e;
          });
        });
      } catch (err) {
        console.error('フォーム情報の取得に失敗:', err);
      }
    }

    return event;
  });

})();
2

残念ながら gitFieldElement は作成・編集画面では利用できないんですよね。。。（詳細と印刷画面でのみつかえる）

ので、（DOMを直接参照しないで）やりたいことをやろうとすると、
対象フィールドのとなりにスペースフィールドをおいて、そのスペースフィールドに何かを示す、ということになるかなぁとおもいます。（画面の一番上において変更点をまとめてしめす、などの工夫で設置はひとつで済む、とかやりようは一応あるとおもいます）

あとは推奨はできませんが、将来的にDOM構造がかわったりして動かなくなる可能性を許容するのであれば、下記のようにDOMを直接参照する方法もあります

3

回答ありがとうございます。試してみます。