kintone レコード追加画面の保存実行前イベントでのSweetAlert と POST実施

 いつも大変お世話になっております。

度々の質問で大変申し訳ありません。

 

レコード追加画面の保存実行前イベント(app.record.create.submit)において、

SweetAlertでのアラートのYES、NO での選択結果で、POSTを実施するようにしていますが

(YESならPOST実施、NOならPOST実施なし)

 

保存ボタンを押した際、SweetAlertのポップ表示までは出ますが、YESかNOを選択する前に、

NOを選択した状態でレコードの保存のみが流れる様に実施されてしまいます。

この動きは変えられないものなのでしょうか。

 

ちなみに、レコード編集画面の保存実行前イベント(app.record.create.submit)では

同じロジックを通りますが問題なく選択出来ます。

 

知っていらっしゃる方がいらっしゃいましたら、

教えて頂けると助かります。よろしくお願いします。

arakaki さん

 

現状どのようなコードを書かれてますでしょうか?sweetalertも非同期な動きをしますので、その辺が原因だと思いますが、kintone.Promiseを使った処理が適切になされていれば、意図通りの動きは実現できると思います。

 

ちなみに、新規登録と編集は似て非なるものとして、違う動きに見えることが多々あります。

Ryu Yamashita さん

 

コメント頂きありがとうございます。

以下のようなロジックになっています。

(処理が長いので一部分をピックアップしたため、多少の記入ミスがあるかもしれません…)

 

//複数予定登録確認アラート
swal ({ title: “複数登録確認”, text: “翌週も合わせて予定表に登録しますか?”,
type: “warning”,showCancelButton: true,
confirmButtonColor: “#DD6B55”, confirmButtonText: “はい、登録します”, cancelButtonText: “いいえ、当日のみです”,
closeOnConfirm: false, closeOnCancel: false },
function(isConfirm) {
if (isConfirm) {
//post用項目作成
if (event.record[‘複数予定時刻_1’][‘value’] !== “” ) {
datetime = moment().format(‘YYYY-MM-DD’) + ’ ’ + event.record[‘複数予定時刻_1’][‘value’];
var datetimed = moment(datetime).add(7, ‘days’);
var postweeks1 = moment(datetimed).toISOString();
var datetimen = moment(datetimed).add(1, ‘hour’);
var postweeke1 = moment(datetimen).toISOString();
var service = event.record[‘複数予定’][‘value’];
var detail = event.record[‘複数予定詳細’][‘value’];
var title = event.record[‘氏名’][‘value’] + ‘:’ +event.record[‘複数予定’][‘value’];
}
//登録実施
var body = {
“app”: 4,
“records”: [
{
“日時”: {
“value”: postweeks1 },
“日時_0”: {
“value”: postweeke1 },
“予定”: {
“value”: service },
“予定詳細”: {
“value”: detail },
“スケジュール上の表示” :{
“value”: title },
}
]
};
kintone.api(kintone.api.url(‘/k/v1/records’, true),
‘POST’, body,
function(resp) {
// success
console.log(resp); },
function(error) {
// error
swal(“エラー”, “複数登録予定についてエラーです”, “error”);
console.log(error);
});

swal(“登録完了”, “複数登録を実施しました”, “success”);
}
else {
swal(“当予定のみ登録完了”, “「登録内容」の予定のみ登録しました”, “success”);
}
});

 

 

>>kintone.Promiseを使った処理が適切になされていれば~

とのことですが、Promiseを使いそうかな??となんとなく想像しているのですが、解説サイトをみてもどういう時に使用するのか、方法とか詳細が分からずでした…用語も不明で…すみません。

 

 

 

共有してもらったものを元に書き足させてもらうと、こんな感じでしょうか。

 

kintone.events.on([
'app.record.create.submit',
'app.record.edit.submit'
], function(event) {
return new kintone.Promise(function(resolve, reject) {
swal({
title: "複数登録確認",
text: "翌週も合わせて予定表に登録しますか?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "はい、登録します",
cancelButtonText: "いいえ、当日のみです",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
//post用項目作成
if (event.record['複数予定時刻_1']['value'] !== "") {
datetime = moment().format('YYYY-MM-DD') + ' ' + event.record['複数予定時刻_1']['value'];
var datetimed = moment(datetime).add(7, 'days');
var postweeks1 = moment(datetimed).toISOString();
var datetimen = moment(datetimed).add(1, 'hour');
var postweeke1 = moment(datetimen).toISOString();
var service = event.record['複数予定']['value'];
var detail = event.record['複数予定詳細']['value'];
var title = event.record['氏名']['value'] + ':' + event.record['複数予定']['value'];
}
//登録実施
var body = {
"app": 4,
"records": [{
"日時": {
"value": postweeks1
},
"日時_0": {
"value": postweeke1
},
"予定": {
"value": service
},
"予定詳細": {
"value": detail
},
"スケジュール上の表示": {
"value": title
},
}]
};
kintone.api(kintone.api.url('/k/v1/records', true),
'POST', body,
function(resp) {
// success
console.log(resp);
resolve(resp);
},
function(error) {
// error
//swal("エラー", "複数登録予定についてエラーです", "error");
//console.log(error);
swal({
title: 'エラー',
text: '複数登録予定についてエラーです',
type: 'error'
}, function() {
reject(error);
});
}
);
//swal("登録完了", "複数登録を実施しました", "success");
} else {
//swal("当予定のみ登録完了", "「登録内容」の予定のみ登録しました", "success");
swal({
title: '当予定のみ登録完了',
text: '「登録内容」の予定のみ登録しました',
type: 'success'
}, function() {
resolve();
});
}
}
);
}).then(function(r) {
return event;
}).catch(function(e) {
//event.error = 'エラーが発生しました';
return event;
});
});

 

ポイントは次のとおりだと思います。

  1. やはりSweetAlertが非同期であること
  2. そのSweetAlertのコールバックを受け取る書き方を知っていること(これを知らないとPromiseも使いようがありませんので)
  3. submitイベントに適切にkintone.Promiseオブジェクトのチェーンをreturn eventしてあげること

 

    1. はまとめられますが、2がよりポイントだと思います。詳しくはこちらにまとめていますが、コールバックを受け取る書き方への書き換えはこのようになります。

    // コールバックを受け取らない書き方
    swal(“当予定のみ登録完了”, “「登録内容」の予定のみ登録しました”, “success”);

    // コールバックを受け取る書き方
    swal({
    title: ‘当予定のみ登録完了’,
    text: ‘「登録内容」の予定のみ登録しました’,
    type: ‘success’
    }, function() {
    // ここがコールバック
    });

 

3.については、この辺を確認頂いて、今回のケースと見比べてもうらうのが良いかと思います。

 

エラー処理をどこでどのようにするかが少し悩ましいのと、全体の動きは確認していませんが、このような書き方をすれば、SweetAlertを含めた非同期処理を拾いながら処理を進めることが出来ますので、実現されたい形になると思います。

Ryu Yamashita さん

 

コメント頂きありがとうございます。

ご丁寧に解説いただき、感謝いたします。

 

実装してみます。