何を実現したいのかを書きましょう
過去の在庫は編集した際に、その日付から現在のデータまで自動で数値を編集するようにしているのですが、後ろで動いているJavaScriptのputが終わるまで画面遷移をさせないようにロード中を表示させたいと思っています。
発生した問題やエラーメッセージを具体的に書きましょう
showSpinnerを使えば、ロード中を表示させれたのですが、PUTが終わる前にshowSpinnerが終わってしまいます。
実行したコードをコピー＆ペーストしましょう
(function() {
'use strict';
kintone.events.on(['app.record.edit.submit.success','app.record.create.submit.success'], function(event){
var recodeNo = event.recordId;
var id = event.appId;
var rcNo = Number(recodeNo) - 1;
let putRecords = [];
var user = kintone.getLoginUser();
if (user.name === "administrator"){
showSpinner(); // スピナー表示
var manager = new KintoneRecordManager;
manager.getRecords(function(records) {
// レコード取得後の処理
for(let i = 0; i < records.length ; i++){
let rcNo = records[i].レコード番号.value;
if(rcNo == recodeNo){
let count = i + 1
if(count < records.length){
let honzantainetu = records[i].耐熱カップ_本日残.value;
let nowrecodeNo = records[count].レコード番号.value;
const upRecord = {'app': id,'records': [{'id': nowrecodeNo,
'record': {
'耐熱カップ_前日残': {
'value': honzantainetu
}
}
}]
}
RecordUpdate(upRecord);
for(let j = i; j < records.length; j++){
var k = j + 1;
let honzantainetu2
let honzanumekonbu2
if(k < records.length){
if(j > i){
honzantainetu2 = honzantainetu - Number(records[j].耐熱カップ_総杯数.value) + Number(records[j].耐熱カップ_入庫.value) - Number(records[j].耐熱カップ_廃棄.value);
honzantainetu = honzantainetu2;
}else{
honzantainetu2 = honzantainetu
honzantainetu = honzantainetu2;
}
let uprecodeNo = records[k].レコード番号.value;
if(j > i){
const tmpRecord = {'id': uprecodeNo,
'record': {
'耐熱カップ_前日残': {
'value': honzantainetu2
}
}
}
putRecords.push(tmpRecord);
}
}
}
let body = {'app': kintone.app.getId(),'records': putRecords}
console.log(body);
RecordsUpdate(body);
}
}
}
});
}
hideSpinner(); // スピナー非表示
return event;
});
function RecordUpdate(recodeup){
kintone.api(kintone.api.url('/k/v1/records.json', true), 'PUT', recodeup, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});
}
/**
* kintoneと通信を行うクラス
*/
var KintoneRecordManager = (function() {
KintoneRecordManager.prototype.records = []; // 取得したレコード
KintoneRecordManager.prototype.appId = null; // アプリID
KintoneRecordManager.prototype.query = ''; // 検索クエリ
KintoneRecordManager.prototype.limit = 100; // 一回あたりの最大取得件数
KintoneRecordManager.prototype.offset = 0; // オフセット
function KintoneRecordManager() {
this.appId = kintone.app.getId();
this.records = [];
}
// すべてのレコード取得する
KintoneRecordManager.prototype.getRecords = function(callback) {
kintone.api(
kintone.api.url('/k/v1/records', true),
'GET',
{
app: this.appId,
query: this.query + ('order by 日時 asc '+' limit ' + this.limit + ' offset ' + this.offset)
},
(function(_this) {
return function(res) {
var len;
Array.prototype.push.apply(_this.records, res.records);
len = res.records.length;
_this.offset += len;
if (len < _this.limit) { // まだレコードがあるか？
_this.ready = true;
if (callback !== null) {
callback(_this.records); // レコード取得後のcallback
}
} else {
_this.getRecords(callback); // 自分自身をコール
}
};
})(this)
);
};
return KintoneRecordManager;
})();
// スピナーを動作させる関数
const showSpinner = () => {
// 要素作成等初期化処理
if (document.getElementsByClassName('.kintone-spinner').length === 0) {
// スピナー設置用要素と背景要素の作成
const spin_div = $('<div id ="kintone-spin" class="kintone-spinner"></div>');
const spin_bg_div = $('<div id ="kintone-spin-bg" class="kintone-spinner"></div>');
// スピナー用要素をbodyにappend
$(document.body).append(spin_div, spin_bg_div);
// スピナー動作に伴うスタイル設定
$(spin_div).css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'z-index': '510',
'background-color': '#fff',
'padding': '26px',
'-moz-border-radius': '4px',
'-webkit-border-radius': '4px',
'border-radius': '4px'
});
$(spin_bg_div).css({
'position': 'fixed',
'top': '0px',
'left': '0px',
'z-index': '500',
'width': '100%',
'height': '200%',
'background-color': '#000',
'opacity': '0.5',
'filter': 'alpha(opacity=50)',
'-ms-filter': 'alpha(opacity=50)'
});
// スピナーに対するオプション設定
const opts = {
'color': '#000'
};
// スピナーを作動
new Spinner(opts).spin(document.getElementById('kintone-spin'));
}
// スピナー始動（表示）
$('.kintone-spinner').show();
};
// スピナーを停止させる関数
const hideSpinner = () => {
// スピナー停止（非表示）
$('.kintone-spinner').hide();
};
})();