見出し画像

アプリのテーブル内のデータを日付順で並び替える

やりたいこと

Kintoneアプリのテーブルにデータを入力完了した後で「日付の降順で入力するルールでやりし直して」と言われて、困った人からのリクエストです。
標準機能では、テーブルの要素を並び替えすることはできません。
(2023年10月20日現在)
データの順番に注意しながら入力するのは、ストレス作業ですね。

解決策として、テーブル入力の順番がバラバラでも「保存」ボタンで日付の降順(又は昇順)で自動的に並び替える機能を実装しました。

デモ画面

テーブル内データを日付の降順で並び替え

テーブル内のデータを並び替えするJavascript

/* テーブルの内容を日付で並び替えする */

(function() {
    "use strict";

    const TABLE_FIELD_CODE = 'テーブル';  // テーブルフィールドのフィールドコード
    const DATE_FIELD_CODE  = '出荷日';    // 日付フィールドのフィールドコード(テーブル内)
    const SORT_ORDER = { ASCENDING: '昇順', DESCENDING: '降順' };

    const INITIAL_SORT_ORDER = SORT_ORDER.DESCENDING;  // ここで昇順か降順を選択

    function sortTable(record) {
        // テーブルの要素を日付フィールドの昇順または降順でソート
        record[TABLE_FIELD_CODE].value.sort(function(a, b) {
            let dateA = new Date(a.value[DATE_FIELD_CODE].value);
            let dateB = new Date(b.value[DATE_FIELD_CODE].value);
            return INITIAL_SORT_ORDER === SORT_ORDER.ASCENDING ? dateA - dateB : dateB - dateA;
        });
        return record;
    }

    kintone.events.on('app.record.edit.show', function(event) {
        let record = sortTable(event.record);
        return { record: record };
    });

    kintone.events.on('app.record.create.submit', function(event) {
        let record = sortTable(event.record);
        return { record: record };
    });

})();

初期設定でテーブルと日付のフィールドコードを設定します。
10行目の「SORT_ORDER.DESCENDING」の部分をASCENDINGに変更すれば、昇順ソートも出来ます。
日付の代わりに数字フィールドを指定して並び替えることも可能です。

デモ画面は新規登録画面でしたが、登録済レコードのテーブルデータの並び替えが必要なことも考慮して、レコード編集イベントでもソートを実行するようにしています。
今回は、課題解決できる実用的な機能を割と短いコードで実装出来たと思います。

よろしければサポートお願いします! いただいたサポートは、note記事制作の活動費に使わせていただきます!