Tips

テーブルに連番をつける

著者名： 金春利幸 (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で動作を確認しています。