レコード連続登録＆リスト表示機能

やりたいこと

Kintoneアプリで大量のデータを入力するときに、①新規登録フォーム表示→②入力＆保存→③レコード詳細画面表示→④レコード追加ボタンクリックの処理を繰り返すのが面倒に感じる時があります。

そこで今回は、レコード新規登録画面で保存後にレコード詳細画面を表示せずに、新規レコード登録画面を連続で開くカスタマイズを行いました。
更に、どこまで入力したか分かる様に、フォームの上部に最新レコード３件分をリスト表示する機能も付加しました。
なお、最新レコードのリストは、新規登録画面だけで表示します。
※レコード詳細、編集画面ではリスト表示しません。

デモ画面１

新規レコードを保存すると、連続して新規レコード登録画面が表示されて、画面上部に最新３件分のレコードリストを表示します。

デモ画面２

デモ画面２では、4件目のレコードを新規登録しています。
新規レコードの保存後に表示される画面では、最新３件分のデータをリスト表示で確認できます。この機能により、レコード新規登録フォーム画面でも「どこまで入力したか？」分からなくなることを防げます。

レコード保存後に新規レコード登録画面が連続して表示されますので、入力を完了する場合は「キャンセル」ボタンを押す必要があります。

---

フォームの設定

フォームの設定画面で、スペースを画面上部に追加して、スペースの設定画面で、要素IDに「RecordList_space」と記入します。
このスペース領域に、最新３件のレコードリストが表示されます。
その他のフィールドの設定は、自由に行ってください。
フォーム上にリスト表示したいフィールドのフィールドコードを控えてから、Javascriptコードの設定に進みます。

Javascriptsサンプルコード

以下のサンプルコードをコピーして、文字コードをutf-8で保存します。
初期設定部分を、フォームの設定に合わせるだけで動作します。
具体的には、SPACEにリスト表示部の要素IDを指定して、CONFIG.fieldsの配列に、リスト表示したいフォーム上のフィールドコードを指定します。

フォーム上に表示するレコードリストの件数を増減したい場合は、
query: 'order by $id desc limit 3' のlimitの数字を修正してください。
あまり大きな数字だと表示が遅くなりますので、10以下が推奨です

最新レコードリスト表示の装飾機能は省略していますので、各自で工夫して下さい。

/* レコード連続登録＆リスト表示機能
 * アプリの連続新規登録＆フォーム上に最新レコード３件を表示する
 * Sample Program
 * Distributor: https://note.com/appgroup
 * Copyright (c) 2024 Application Utilization Study Group
 * Licensed under the MIT License
 ------------------------------------------------------------*/
(function() {
  'use strict';

  // 初期設定
  const SPACE = 'RecordList_space';
  const CONFIG = {
    fields: ['日付', '商品名', '金額', '送料', '合計', '備考']
  };

  // レコード取得関数
  const getLatestRecords = async (app) => {
    const params = {
      app: app,
      query: 'order by $id desc limit 3',
      fields: CONFIG.fields.concat(['$id'])
    };
    try {
      const response = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', params);
      return sortRecords(response.records || []);
    } catch (error) {
      console.error('Error fetching records:', error);
      return [];
    }
  };

  // 取得レコードを昇順に並び替える関数
  const sortRecords = (records) => {
    return records.sort((a, b) => {
      const idA = a.$id ? parseInt(a.$id.value) : 0;
      const idB = b.$id ? parseInt(b.$id.value) : 0;
      return idA - idB;
    });
  };

  // テーブル作成関数
  const createTable = (records) => {
    const table = document.createElement('table');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';

    // ヘッダー行の作成
    const headerRow = table.insertRow();
    CONFIG.fields.forEach(field => {
      const th = document.createElement('th');
      th.textContent = field;
      th.style.border = '1px solid #ddd';
      th.style.padding = '8px';
      headerRow.appendChild(th);
    });

    // データ行の作成
    records.forEach(record => {
      const row = table.insertRow();
      CONFIG.fields.forEach(field => {
        const cell = row.insertCell();
        let value = record[field] && record[field].value;
        cell.textContent = value || '';
        cell.style.border = '1px solid #ddd';
        cell.style.padding = '8px';
      });
    });

    return table;
  };

  // メイン処理（新規レコード登録画面）
  kintone.events.on('app.record.create.show', async (event) => {
    const spaceElement = kintone.app.record.getSpaceElement(SPACE);
    if (!spaceElement) {
      console.error('Specified space not found');
      return event;
    }

    try {
      const sortedRecords = await getLatestRecords(event.appId);
      const table = createTable(sortedRecords);
      spaceElement.appendChild(table);
    } catch (error) {
      console.error('Error fetching or displaying records:', error);
    }

    return event;
  });

  // レコード保存成功時に新規レコード登録画面に戻る
  kintone.events.on('app.record.create.submit.success', (event) => {
    event.url = `/k/${event.appId}/edit`;
    return event;
  });
})();

設定方法は、アプリの設定＞設定＞JavaScript / CSSでカスタマイズの画面で、Javascript側にアップロードして保存します。

---

カスタマイズした感想

　本稿のカスタマイズ後のフォームでデータの連続入力を試してもらったところ、入力＆保存後の一覧表の表示が省略されて、フォーム上の最新３件のリストで「どこまで入力済なのか」確認できるので、データ入力の時間が短くなり、入力作業が効率的になった、との感想をいただきました。
（本当は、入力の仕事量が減るともっと嬉しいそうですｗ）

　工夫した点は、最新３件のレコードリストの表示順序です。
　カスタマイズのコードで取得する最新３件のレコードセットは、レコード番号の降順で取得する必要がありますが、表計算ソフトの入力では、上から下へデータを入力するので、その規則性と同じ様に入力済データをレコード番号の昇順（古いレコード順）でリスト表示する様にしました。

　この工夫により、入力済データのリスト（最新３件）は入力時間の古い順（最新データが一番下の行）に表示され、その下に新規データ登録用のフォームを表示するＵＩ（ユーザーインターフェイス）を実現しています。

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