キャンセルボタン押下時に確認メッセージを出したい。

レコードの編集画面で、

デフォルトで、「保存」、「キャンセル」ボタンが表示されていますが、

「キャンセルボタン」を押した場合、メッセージを出せないでしょうか。

 

具体的には、「キャンセルしますか?」とメッセージを出して、

「OK」とした場合のみ、キャンセルとさせたいです。

(「NO」の場合は編集モードを維持)

 

モバイル画面で、ユーザが誤って「キャンセルボタン」を押下してしまい、

それまでの入力がパーになるケースが多く、相談致しました。

キャンセルボタンが押されたタイミングをキャッチできるイベントが公開してないようです。

ジャストアイデアですが、キャンセルボタンを押してから「キャンセルしますか?」メッセージを出すよりも、

kintone本来のキャンセルボタンを非表示し、

自分で別途「キャンセル」ボタンをHTMLで作れば、押されたタイミングでキャッチできるではと思っています。

で「キャンセルしますか?」メッセージを出して、

本当にキャンセルしたい場合は、本来のkintoneキャンセルボタンを非表示⇒表示に転換し、

もしくはそのkintoneキャンセルボタンを裏でクリックイベントを発火できればベストだが、、

 

chengweister様

ご返信有り難うございます!
「kintone本来のキャンセルボタンを非表示」で大丈夫です。
(ユーザより、誤って押下してしまうので、なんとかしてほしいという相談でして・・・)

以下スクリプトを書いてみたいのですが、
パソコン画面では、「保存」ボタンも非表示となってしまいました。

(function () {
“use strict”;
// レコード詳細画面が表示された時のイベント
kintone.events.on(‘app.record.edit.show’,‘app.record.create.show’, function (event) {
document.getElementsByClassName(‘gaia-ui-actionmenu-cancel’)[0].parentNode.style.display = ‘none’;
});
})();

また、モバイル画面の方では、以下のように書きましたが、まったく作用しませんでした。
(キャンセル、保存、どちらのボタンも表示されたまま)

(function () {
“use strict”;
// レコード詳細画面が表示された時のイベント
kintone.events.on(‘mobile.app.record.edit.show’,‘mobile.app.record.create.show’, function (event) {
document.getElementsByClassName(‘gaia-ui-actionmenu-cancel’)[0].parentNode.style.display = ‘none’;
});
})();

モバイル画面の「キャンセル」ボタンを消せたらと思うのですが、
スクリプトの修正、お助け頂けないでしょうか?

お手数をおかけしますが、宜しくお願い致します!

Chromeでデバグすることをお勧めますが、

パット見て、document.getElementsByClassName(‘gaia-ui-actionmenu-cancel’)[0].parentNode.style.display = ‘none’;

そのparentNodeが気になりますね。なぜparentNodeの要素を非表示するのは良く分かりませんが、

document.getElementsByClassName(‘gaia-ui-actionmenu-cancel’)[0].style.display = ‘none’;

でやてみたらどうですか?

2番目のモバイル問題ですが、

恐らくキャンセルボタンのClassはgaia-ui-actionmenu-cancelではない可能性が高いと思われますね。

じゃモバイル環境でキャンセルボタンのClassは何ですかと聞かれると、

恐れ入りますがわたくしも良く分かりません。

それをCybozouさんに問い合わせしていただくか、継続このコミュニティで質問すると思いますね。

 

chengweister 様

ご返信を頂き、有難うございます!

お知らせ頂いたコードで書いたところ、

パソコン画面の方では、「キャンセル」ボタン、消すことができました!

 

モバイル画面の方は、おっしゃる通り、Classが違うみたいです・・・。

以下ページを参照に探しているのですが・・・。

https://qiita.com/holynight_201/items/bc52ee15aaa3d0cdcd73

 

「gaia-mobile-v2-bottomsheet-cance」ではないかと推察し、試してみましたが、だめでした。

 

<div role=“dialog” aria-modal=“true” class=“gaia-mobile-v2-bottomsheet gaia-mobile-v2-app-appbottomsheet gaia-mobile-v2-bottomsheet-hidden” aria-hidden=“true”><div class=“gaia-mobile-v2-bottomsheet-background”></div><div class=“gaia-mobile-v2-bottomsheet-contents”><div><h2 class=“gaia-mobile-v2-bottomsheet-title”>【テスト】注文書</h2><ul role=“menu” class=“gaia-mobile-v2-bottomsheet-menu”><li class=“gaia-mobile-v2-bottomsheet-menuitem”><a href=“/k/m/1382/” class=“gaia-mobile-v2-app-appbottomsheet-item-link-openapp” role=“menuitem”>このアプリのトップを開く</a></li><li class=“gaia-mobile-v2-bottomsheet-menuitem”><button type=“button” role=“menuitem” class=“gaia-mobile-v2-app-appbottomsheet-item-add-favorite”>お気に入りに追加</button><button type=“button” role=“menuitem” class=“gaia-mobile-v2-app-appbottomsheet-item-remove-favorite gaia-mobile-v2-app-appbottomsheet-item-hidden”>お気に入りを解除</button></li></ul><button type=“button” class=“gaia-mobile-v2-bottomsheet-cancel”>キャンセル</button></div></div></div>

モバイルならgaia-mobile-v2-app-record-edittoolbar-cancel

これで試してみてください。

chengweister 様

 

有り難うございます!

お書き頂いたコードで試したところ、モバイル画面でもキャンセルボタンを消すことができました!

お世辞ではなく、感動しています(難しいと感じ始めていたので・・・)。有り難うございました!

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。