今回のTipsでは、
レコード追加画面で保存に成功した後のイベント
を利用して、自動採番機能をシンプルに実装します。
レコードの追加画面や編集画面を表示するイベントで自動採番する方法は、次の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と合わせて実装方法がどのように変わったのか、一度見比べてみてください。
