1
0

kintoneの保存時(submit)にSweetAlert2を使って保存させるか選ばせる方法

Last updated at Posted at 2024-05-22

環境

  • kintone
  • javascript
  • jQuery
  • SweetAlert2

対象

  • kintoneの保存時(submit)にSweetAlert2を使って保存させるか選ばせたい人

通常の書き方(ダメなパターン)

通常は以下の様な書き方になると思います。

  kintone.events.on(
    ["app.record.create.submit", "app.record.edit.submit"],
    (event) => {
      Swal.fire({
        title: "保存",
        text: "保存処理を続けますか?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "保存する",
        cancelButtonText: "保存しない",
      }).then((result) => {
        if (result.isConfirmed) {
            console.log('保存する が押されました。');
            return event;
        } else {
            console.log('保存しない が押されました。');
            return false;
        }
    });

この場合、保存処理が先に動いてしまい保存か保存させないかを選ぶ前に保存されてしまいます。
そのため以下の様に非同期処理を制御するためにPromiseを使用します。

Promiseを使用した書き方

以下の様にします。

  kintone.events.on(
    ["app.record.create.submit", "app.record.edit.submit"],
    (event) => {

      return new kintone.Promise((resolve, reject) => {
        Swal.fire({
          title: "保存",
          text: "保存処理を続けますか?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "保存する",
          cancelButtonText: "保存しない"
        }).then((result) => {
          if (result.isConfirmed) {
            console.log("保存する が押されました。");
            resolve(event);
          } else {
            console.log("保存しない が押されました。");
            reject("cancel");
          }
        });
      }).then((r) => {
        return r;
      }).catch((e) => {
        return false;
      });
      
    });

kintone.Promiseの説明資料

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0