レコード一覧画面の見た目をJavaScriptでカスタマイズしているとインライン編集後に、カスタマイズした内容が消えてしまいます。
たとえば、app.record.index.showで適用した 条件書式 や プログレスバー などが該当します。

2026年3月版アップデートで追加されたapp.record.index.edit.finishを使うと、この問題を解決できます。

この記事では、インライン編集後に一覧のカスタマイズが消える原因を整理します。
そのうえで、app.record.index.edit.finishによる解決方法と、app.record.index.edit.submit.successとの使い分けを解説します。
なお、以降ではそれぞれをfinishイベント、submit.successイベントと呼びます。

次の画像は、app.record.index.showで優先度の値に応じた条件書式を適用した一覧画面です。

この状態でレコード4をインライン編集し、「キャンセル」をクリックすると、編集した行だけスタイルが消えます。

これは、インライン編集の終了時に、kintoneが編集した行のDOMを再構築するためです。
そのため、app.record.index.showで一度適用したスタイルやDOMの変更は、このDOMの再構築によって失われてしまいます。

この問題は、finishイベントで解決できます。
finishイベントは、インライン編集の「保存」または「キャンセル」の後、テーブル表示に戻ったタイミングで発生します。
DOMの再構築が完了した後に発生するためsetTimeoutは不要で、キャンセル時にも発生する点が特徴です。

従来、保存時のスタイル消失に対しては次のような方法で対処していました。

• submit.successイベント内でsetTimeoutを使ってDOMの再構築を待つ。
• event.urlに遷移先のURLを設定してページをリロードさせる。

しかし、いずれも待ち時間の調整が難しいうえに、submit.successイベントはキャンセル時には発生しないため、キャンセル後のスタイル消失には対処できませんでした。

app.record.index.edit.finishの詳細は、次のページを参照してください。
レコード一覧画面のインライン編集を終了したときのイベント

次のフィールドをもつアプリを用意します。

ドロップダウンの選択肢には「高」「中」「低」を設定します。

次のサンプルコードを参考に、JavaScriptファイルを作成し、「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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

/*
 * conditional formatting with finish event sample program
 * Copyright (c) 2026 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  // すべての行の優先度フィールドに、値に応じた条件書式を適用する
  const applyConditionalFormatting = async (records) => {
    const body = [];

    for (const record of records) {
      const priority = record.priority.value;
      let content;
      let background;

      switch (priority) {
        case '高':
          content = {color: '#cc0000'};
          background = {backgroundColor: '#ffcccc'};
          break;
        case '中':
          content = {color: '#cc8800'};
          background = {backgroundColor: '#ffffcc'};
          break;
        case '低':
          content = {color: '#008800'};
          background = {backgroundColor: '#ccffcc'};
          break;
        default:
          continue;
      }

      body.push({
        recordId: record.$id.value,
        style: [{
          columnType: 'FIELD',
          column: 'priority',
          content,
          background,
        }],
      });
    }

    if (body.length > 0) {
      await kintone.app.setRecordListStyle({body});
    }
  };

  // 一覧表示時に条件書式を適用する
  kintone.events.on('app.record.index.show', async (event) => {
    await applyConditionalFormatting(event.records);
    return event;
  });

  // インライン編集終了時に条件書式を再適用する
  kintone.events.on('app.record.index.edit.finish', async (event) => {
    await applyConditionalFormatting([event.record]);
    return event;
  });
})();

条件書式の適用処理をapplyConditionalFormatting関数にまとめ、app.record.index.showとapp.record.index.edit.finishの両方から呼び出しています。

これにより、一覧の初回表示時とインライン編集終了後の両方で、同じ条件書式を適用できます。
また、finishイベントを使っているため、保存・キャンセルのどちらの操作後でもスタイルが維持されます。

警告

finishイベントはキャンセル時にも発生しますが、保存とキャンセルを判別する方法は提供されていません。
そのため、判別が不要な処理（画面の再描画など）に使うのが適切です。

app.record.index.edit.finishと似た名前のイベントに、app.record.index.edit.submit.successがあります。
このイベントは、保存が成功した直後に発生します。

2つのイベントの違いを表にまとめます。

なお、保存時には両方のイベントが発生し、submit.success→finishの順で実行されます。
保存が確定したことを前提とする処理（別アプリとの連携、外部へのデータ送信など）は、submit.successイベントを使います。
テーブル表示に戻った後の画面の見た目に関する処理（条件書式の再適用、スタイルの変更など）は、finishイベントを使います。

app.record.index.edit.submit.successの詳細は、次のページを参照してください。
レコード一覧画面のインライン編集に成功したときのイベント

この記事では、レコード一覧のカスタマイズがインライン編集後に消えてしまう問題と、finishイベントによる解決方法を解説しました。
従来は、submit.successイベントでは対応できなかったキャンセル時のスタイル消失も、finishイベントを使うと簡単に対処できます。
似た名前のイベントですが、用途が明確に分かれています。
インライン編集を多用するアプリで一覧画面のカスタマイズに困ったときは、ぜひfinishイベントを試してみてください。

このTipsは、2026年7月版kintoneで動作を確認しています。