kintoneのレコード編集中なのにブラウザを閉じてしまったり、ページ遷移をしてしまったり…。 そんなうっかりミスに備え、Web Storage APIを使ったレコード一時保存のサンプルを紹介します。
サンプル
一定時間ごとに、レコードを一時保存します。 submitせずにページを閉じた場合、次回編集時に一時保存した情報を用いるかconfirm表示します。
※confirmの見た目はブラウザに依存します。
※添付ファイルフィールドの値は一時保存されません。
※LocalStorageの容量制限を超えるレコードは扱えません。
https://www.html5rocks.com/ja/tutorials/offline/quota-research/
コード
下記「sample.js」を読み込みます。 kintoneの全体JSとして読み込んでも動作します。
・sample.js
``
(function () {
"use strict";
var storageName;
var timer;
kintone.events.on([
'app.record.create.show',
'app.record.edit.show',
], function (event) {
storageName = kintone.app.getId() + '-' + kintone.app.record.getId();
var tempRecord = JSON.parse(localStorage.getItem(storageName) || '[]');
if (tempRecord.created) {
if (confirm('一時保存されたデータがあります。補完しますか？保存日時: ' + new Date(tempRecord.created) + '保存内容: ' + JSON.stringify(tempRecord.record))) {
event.record = tempRecord.record;
}
}
timer = setInterval(function () {
localStorage.setItem(storageName, JSON.stringify({
created: new Date(),
record: kintone.app.record.get().record
}, function (key, value) {
return typeof value === 'undefined' ? null : value;
}));
}, 3000); //一時保存の頻度(ミリ秒)
return event;
});
kintone.events.on([
'app.record.create.submit.success',
'app.record.edit.submit.success',
], function (event) {
clearInterval(timer);
localStorage.removeItem(storageName);
});
kintone.events.on([
'app.record.detail.show'
], function (event) {
clearInterval(timer);
});
})();
``
``
・今回はsetIntervalを用いて「一定時間ごと」に一時保存していますが、「フィールド値変更時イベント」で一時保存することも可能です。
※ただし、フィールド値変更時イベントは、文字列 (複数行)など一部フィールドタイプには対応していません。
kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {
app: kintone.app.getId(),
}).then(function(response){
kintone.events.on(Object.keys(response.properties).reduce(function(fields, field){
return fields.concat(field, Object.keys(response.properties[field].fields || []));
}, []).reduce(function(events, field){
return events.concat([
'app.record.create.change.' + field,
'app.record.edit.change.' + field
]);
}, []), function(event){
localStorage.setItem(storageName, JSON.stringify({
created: new Date(),
record: event.record
}, function(key, value){
return typeof value === 'undefined' ? null : value;
}));
});
});