今回の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と合わせて実装方法がどのように変わったのか、一度見比べてみてください。
