テーブル内の古いデータを一括削除するボタンの設置

やりたいこと

Kintoneアプリのフォームにあるテーブルデータを日付で判定して1年以上前の日付の行を一括で削除したい。

kintoneではレコードの検索と一括削除機能はあるのですが、各レコード内のテーブルのデータは、レコードがある限りずーっと残ります。
テーブルデータの日付が「1年以上前」の古いデータは一括してテーブルから削除する機能をフォームに追加します。
このカスタマイズは、レコード編集画面で動作します。

デモ画面

デモ画面では、レコード編集画面で「期限切れデータ削除」ボタンをクリックすると、本日から保存日数（３６５日）を差し引いた日付より前のデータ（２行と４行目のデータ）を削除してテーブルを再表示します。
削除実行後に「保存」ボタンを押せば、テーブルの行削除が確定します。
「キャンセル」ボタンを押せば元の状態に戻ります。

テーブルの古いデータを削除

---

フォームの設定

フォームの設定では、フィールド名（フィールドコード）：フィールド型を以下の様に設定して下さい。
テーブル内の実際のフィールドは自由に設定して下さい。
但し「日付」フィールドは必ず必要です。

フォーム設定

重要なのは。★印のフィールドのフィールドコードをJavascriptの設定と合わせることです。

• ★テーブル（テーブル）

  • ★日付（日付）：日付型

  • データ（データ）：文字列1行

• ★保存日数（保存日数）：初期値＝365

• ★スペース（要素ID＝Button_Space）

---

サンプルのJavascriptコード

初期設定のフィールドコードを、kintoneフォームのフィールドコード名と合わせる様にして下さい。
エラーになる原因は、初期設定のフィールドコードがフォームの設定内容と異なるケースがほとんどです。

ボタンの名前を変更したい場合は、以下の行を修正して下さい。
deleteButton.innerText = '期限切れデータ削除';
その他の部分は、修正する必要はありません。

/* サブテーブルの旧い行を削除する */
(function() {
    'use strict';

    // 初期設定
    const CONFIG = {
        SUB_TABLE:  'テーブル',  // サブテーブルのフィールドコード
        DATE_FIELD: '日付',     // 日付フィールドのフィールドコード
        DAYS_FIELD: '保存日数'  // 日数フィールドのフィールドコード
    };

    // 期限切れデータを削除する関数
    function deleteExpiredData(record) {
        const daysAgo = record[CONFIG.DAYS_FIELD].value;
        const cutoffDate = new Date();
        cutoffDate.setDate(cutoffDate.getDate() - daysAgo);

        const subTable = record[CONFIG.SUB_TABLE].value;
        const filteredSubTable = subTable.filter(row => {
            const rowDate = new Date(row.value[CONFIG.DATE_FIELD].value);
            return rowDate >= cutoffDate;
        });
        record[CONFIG.SUB_TABLE].value = filteredSubTable;
        kintone.app.record.set({ record: record });
    }

    // イベントハンドラー
    kintone.events.on(['app.record.edit.show'], function(event) {
        const deleteButton = document.createElement('button');
        deleteButton.innerText = '期限切れデータ削除';
        deleteButton.style.marginTop = '36px';
        
        const subTableSpace = kintone.app.record.getSpaceElement('Button_Sapace');
        if (subTableSpace) {
            subTableSpace.appendChild(deleteButton);
        }

        deleteButton.addEventListener('click', function() {
            deleteExpiredData(event.record);
        });
        return event;
    });
})();

カスタマイズした感想

本カスタマイズを実装した経緯は、レコード内のテーブルの値を集計する際に「1年以上前のデータが集計の邪魔です」との要望から実装しました。
人間がテーブルの各行を目視して不要なデータを削除する操作では間違いが起こり易いので、経過日数判定で一括削除できるようにしたものです。

別記事のテーブル内データのソートのカスタマイズと組み合わせれば、より効率的で正確なデータ保守が可能になるかもしれません。

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