Posted at

kintoneで処理中にスピナーを表示してみた


やること

新規作成画面を開いたときに別アプリのレコード件数をフィールドにセットします。

その処理中にスピナーを表示します。

be290868c2d3c2c60b7e994d060326e1.gif


JavaScript/CSS設定

以下の通り設定します。



  1. kintone-spinnerをダウンロードしてdist配下のkintone-spinner.min.jsをアップロードして追加

  2. https://kintone.github.io/kintoneUtility/kintoneUtility.min.jsをURL指定で追加

  3. 以下のコードをアップロードして追加

(function() {

'use strict';

kintone.events.on(['app.record.create.show'], (event) => {
const spinner = new Spinner();
document.body.appendChild(spinner.render());

spinner.show();
kintoneUtility.rest.getAllRecordsByQuery({
app: 1222,
query: 'date = LAST_MONTH()'
}).then(function(response) {
var record = kintone.app.record.get();
record.record.count.value = response.records.length;
kintone.app.record.set(record);
}).catch(function(error) {
console.log(error);
}).finally(function() {
spinner.hide();
});

return event;
});

})();


備考

レコード取得にkintone Utilityを利用しているのでkintoneUtility.min.jsを指定しています。

app.record.create.showイベントはPromise対応していないので、kintone.app.record.set()を利用しています。