テーブルに連番をつける

著者名: 金春利幸 (External link) アールスリーインスティテュート (External link)

目次

kintone でアプリを作っていると、レコード内にテーブルを作ることがよくあると思います。 そういったときに、テーブルの各行に連番をつけたくなりませんか?
これをやるには簡単な JavaScript で処理してやる必要があります。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/77/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。

サンプルアプリの構造

テーブルに「数値」フィールドを設置します。
数値フィールドのフィールドコードを「no」とし、テーブルのフィルドコードは「receipts」とします。

イベントの登録と値の更新

作成と編集のときの「保存前」のタイミングでイベントを取得します。

4
5
6
7
8
9
 const events = [
    'app.record.create.submit',
    'app.record.edit.submit'
  ];

  kintone.events.on(events, (event) => {

そして、そのイベントの中で行数を取得します。

12
    const count = record.receipts.value.length;

得られた行数でループして連番を付与していきます。

13
14
15
    for (let i = 0; i < count; i++) {
      record.receipts.value[i].value.no.value = i + 1;
    }

コード全体は以下のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
(() => {
  'use strict';

  const events = [
    'app.record.create.submit',
    'app.record.edit.submit'
  ];

  kintone.events.on(events, (event) => {
    const record = event.record;
    // receiptsテーブルのno欄を自動採番する
    const count = record.receipts.value.length;
    for (let i = 0; i < count; i++) {
      record.receipts.value[i].value.no.value = i + 1;
    }

    return event;
  });
})();

簡単ですね。
保存前の処理は何かとよく使うので、このイベントの取得とレコードの内容へのアクセス方法をマスターしておくと応用が効きますね。

動作確認

それでは、サンプルコードをアプリに適用して動作を確認してみます。
新規レコードを追加する際、試しにテーブルの行を 6 行にして追加してみます(データは空)。

「保存」ボタンを押すと JavaSciript を実行し、行に連番をつけます。

無事に連番が振れましたね。
今回は、レコード追加時のイベント処理しかキャプチャは載せていませんが、レコード編集完了時にも JavaScript の処理は実行されるので、都度連番を振り直すことができます。
ぜひお試しください。

information

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