お世話になっております。
レコード再利用時にメッセージを出したいのですがキャンセルを選択した際に正しく動作をしていません。
いいえを選択した際のダイアログが自動的にクローズされてしまいます。
間違いをご教授いただけますでしょうか？
よろしくお願いいたします。
ちなみに最終的には、詳細画面でレコード再利用を選択した際に
レコード再利用再利用する？
はい→そのまま進める。
いいえ→レコード詳細画面に戻る。
としたいと考えています。
アドバイスもありましたら併せてご教授いただければと思います。
(function() {
“use strict”;
kintone.events.on([‘app.record.detail.show’], function(event) {
window.localStorage.setItem(‘reuse’, location.href);
return event;
});
kintone.events.on(‘app.record.create.show’, function (event) {
return new kintone.Promise(function(event) {
swal({
title: ‘レコードの再利用しますか？’,
text: ‘<span style=“color:red;”>※編集画面ではありません。</span>’,
type: ‘warning’,
showCancelButton: true,
confirmButtonColor: “#DD6B55”,
confirmButtonText: “はい”,
cancelButtonText: “いいえ”,
closeOnConfirm: true,
html: true
}, function(isConfirm) {
if (isConfirm) {
swal({
title: ‘再利用が選択されました’,
type: ‘success’,
});
}else{
swal({
title: ‘キャンセルしました。’,
type: ‘error’,
}
);
}
});return event;
});
});
})();
いくつか問題があります。
・Promise の書き方
kintoneにおけるPromiseの書き方の基本 kintone.Promiseの使い方を参考に見直してください。
イベント終了時に event オブジェクトを返していないので、他に JavaScript やプラグインがあれば、それらも動作しなくなります。
・SweetAlert の入れ子
SweetAlert の入れ子は、たぶん動作しないと思われます。
入れ子に対応している SweetAlert2 などを使われてはいかがでしょうか？
リンク先にサンプルもあります。
・再利用の判定
event.reuse で、再利用かどうか判定できます。
・window.localStorage.setItem(‘reuse’, location.href);
たぶん、詳細画面への戻り先だと思いますが、再利用の場合は遷移元が詳細画面しかないので、
history.back(); で戻ると思います。
この処理の目的は、再利用の場合をユーザーに確認させるためのものだと思われますが、
何回もクリックする手間が増えて、使いにくいのではないかと思われます。
慣れてくると、メッセージも読まずに、無意識でクリックするようになります。
rex0220様
お世話になっております。
こちらを参考に作っていました。
https://developer.cybozu.io/hc/ja/community/posts/115011834506-SweetAlert2%E5%87%A6%E7%90%86%E3%81%8C%E3%82%B9%E3%83%AB%E3%83%BC%E3%81%95%E3%82%8C%E3%82%8B
おっしゃるように何回もクリックが発生することは避けたいと思うのですが、
何分、編集ボタンと再利用のボタンが似ており（利用者目線）誤ってレコードを追加してしまうことがあります。
現状は、下記を使って対応していました。
(function() {
“use strict”;
kintone.events.on([‘app.record.detail.show’], function(event) {
window.localStorage.setItem(‘reuse’, location.href);
return event;
});
kintone.events.on([‘app.record.create.show’], function(event) {
if (event.reuse) {
var result = confirm(‘注：編集画面ではありません。新しくレコードを追加して作成しますか？’);
if(result){
alert(‘OKが押されました。作業を続けてください。’);
}else {
alert(‘キャンセルが押されました。再度編集を行ってください。’);
var url = window.localStorage.getItem(‘reuse’);
var url = window.localStorage.removeItem(‘reuse’);
location.href = “https://test.cybozu.com/k/100/”;
}
}
return event;
});
})();
機能面でいえば問題ないのでこれを使っていればいいのでしょうが
見た目をと興味を持ってしまいまして。。
もしよろしければ、具体的にご教授いただけないでしょうか。
前回いただいた内容も併せて確認していきたいと思います。
よろしくお願いいたします。
・参考にされたリンク先も SweetAlert2 を使っています。
SweetAlert と SweetAlert2 は、別物です。
・どうしてもストレージを使いたいなら localStorage では無く、sessionStorage を使ったほうがいいです。
localStorage は、保持期間の制限はなく、不要な情報がいつまでも残ります。
あと、保存するキーも ‘reuse’ のような単純なものではなく、アプリID とレコード番号を含むキーにしましょう。
コードの使いまわしや、同時に複数レコードを開いたりすると、不具合が発生します。
＞何分、編集ボタンと再利用のボタンが似ており（利用者目線）誤ってレコードを追加してしまうことがあります。
参考に、ちょっと便利なプラグインでは、編集モードを表示するようにして、新規・複写・編集がわかるようにしています。
rex0220様
お世話になっております。
ご返信遅くなり申し訳ありません。
まだ光が見えてきませんが。。。
ご教授いただいた方法を調べてトライしてみたいと思います。
ちょっと便利なプラグインも参考にさせていただきます。
今後ともよろしくお願いいたします。