レコード保存後イベントを使って自動採番をシンプルに実装する方法

目次

はじめに

今回の Tips では、 レコード追加画面で保存に成功した後のイベント を利用することで、自動採番機能をシンプルに実装します。

完成イメージ

レコード追加画面の保存成功後、交通{作成日時}-{レコード番号} というフォーマットで採番されていることが確認できます。
確認のために本 Tips では alert を出しています。

レコード追加画面の保存成功後

レコード詳細画面

アプリの準備

今回は自動採番機能を試すために、アプリストアから「交通費申請」アプリを追加し、次のフィールドを追加しました。

フィールドタイプ フィールド名 フィールドコード
文字列(1 行) 申請 No submit_No

PC 用の JavaScript ファイル

アプリの設定画面で「JavaScript / CSS によるカスタマイズ」を開き、 Cybozu CDN から次のライブラリを指定します。

  • Luxon
    https://js.cybozu.com/luxon/2.0.2/luxon.min.js(version 2.0.2 を利用)

サンプルコード

以下のサンプルコードを記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*
 * レコード保存後イベントを使ったシンプルな自動採番のサンプルプログラム
 * Copyright (c) 2021 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/

(() => {
  'use strict';
  // レコード追加、編集、一覧の編集画面の「申請No」非活性処理
  const eventsShow = ['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'];
  kintone.events.on(eventsShow, (event) => {
    const record = event.record;
    record.submit_No.disabled = true;
    return event;
  });

  // レコード追加画面の保存成功後イベント
  kintone.events.on('app.record.create.submit.success', (event) => {
    const record = event.record;
    const appId = event.appId;
    const recordId = event.recordId;
    const createDate = luxon.DateTime.fromISO(record.作成日時.value).toFormat('yyyyMMdd');

    // レコードの更新API
    const body = {
      app: appId,
      id: recordId,
      record: {
        submit_No: {
          value: `交通${createDate}-${recordId}`
        }
      }
    };
    return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(resp => {
      alert(`申請No: 交通${createDate}-${recordId}を登録しました。`);
      return event;
    }).catch(error => {
      alert(error.message);
      return event;
    });
  });
})();

サンプルコードの解説

前半部分では採番対象のフィールドに非活性処理を行っています。

11
12
13
14
15
16
17
// レコード追加、編集、一覧の編集画面の「申請No」非活性処理
const eventsShow = ['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'];
kintone.events.on(eventsShow, (event) => {
  const record = event.record;
  record.submit_No.disabled = true;
  return event;
});

後半部分では、まず レコード追加画面で保存に成功した後のイベント で「作成日時」と「レコード番号」を結合します。
次に、 1 件のレコードを更新する API を使って申請 No フィールドを結合した値で更新します。
ここでは、レコードの更新処理に kintone.Promise を利用します。

19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// レコード追加画面の保存成功後イベント
kintone.events.on('app.record.create.submit.success', (event) => {
  const record = event.record;
  const appId = event.appId;
  const recordId = event.recordId;
  const createDate = luxon.DateTime.fromISO(record.作成日時.value).toFormat('yyyyMMdd');

  // レコードの更新 API
  const body = {
    app: appId,
    id: recordId,
    record: {
      submit_No: {
        value: `交通${createDate}-${recordId}`
      }
    }
  };
  return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(resp => {
    alert(`申請No: 交通${createDate}-${recordId}を登録しました。`);
    return event;
  }).catch(error => {
    alert(error.message);
    return event;
  });
});

関連 Tips

最後に

今回は レコード追加画面で保存に成功した後のイベント を使って自動採番をシンプルに実装する方法を紹介しました。
関連 Tips と合わせて実装方法がどのように変わったのか、一度見比べてみてください。

information

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