kintoneカスタマイズでレコード全体の背景色を変更する方法

概要

kintoneアプリを使っていると、一覧画面で「特定の条件を満たすレコードを目立たせたい」といったケースがあります。

この記事では、「ステータス」の値が「完了」の場合、一覧画面で対象のレコード全体の背景色をグレーにするカスタマイズをご紹介します。

画面イメージ

前提

kintoneのJavaScriptカスタマイズでは、 フィールドに対して操作するAPIは用意されていますが、レコード全体（行ごと）に直接操作するAPIはありません。
そのため、画面に描画されたHTMLを操作する DOM操作 を使う必要があります。

処理の具体的な流れは次の通りです。

1. 一覧画面のHTMLが描画されたあとに
2. 各レコード(<tr>要素)を取得して
3. 「ステータス」が「完了」の場合に背景色をグレーに変更する

実装例

(() => {
  "use strict";

  kintone.events.on("app.record.index.show", (event) => {
    // HTMLが描画されるのを少し待つ
    setTimeout(() => {
      const rows = document.querySelectorAll("table.recordlist-gaia tbody tr");

      event.records.forEach((record, index) => {
        if (record["status"].value === "完了") {
          const row = rows[index];
          if (row) {
            row.style.backgroundColor = "#bdbdbd"; // グレーに変更
          }
        }
      });
    }, 100);
    return event;
  });
})();

ポイント

• setTimeout() で少し待つことで、HTMLが完全に描画された後に操作できる
  → setTimeout()を使わないと、一部の行しか取得できない可能性がある

• querySelectorAll() で <tr>要素を全て取得する

• forEachで1件ずつ確認して、条件に一致すれば背景色を変更する

注意点

kintoneのクラス名に依存しています。

const rows = document.querySelectorAll("table.recordlist-gaia tbody tr");

この部分でレコードを全て取得しています。
recordlist-gaiaはkintoneの画面で使われているクラス名です。
将来的にクラス名が変更される可能性があります。

もしうまく動作しない場合は、次の手順で確認してください。

1. ブラウザのデベロッパーツールを開く（右クリック → 「検証」）
2. Elementsタブを開く
3. 実際のクラス名を確認する
4. 適切なセレクタに修正する

まとめ

• ステータスが「完了」のレコードを見やすくするために、一覧画面で背景色を変更できる
• kintone APIだけでは直接できない操作なので、DOM操作を利用する
• 将来的なクラス名変更に注意する必要がある