Promise及びsweeAlert2の条件分岐

背景・実現したいこと

Aアプリ一覧のレコード毎にボタンを設置しました。

仕入登録ボタンを押すと、Bアプリ用に連番付与しPOST→Aアプリの未納を完納へPUTします。

 簡単なロジックは下記のイメージです。

 ①まず、”いいえ”を選択した場合、処理を終了させたいのですが、今は、はいの処理も走ってしまいキャンセルできていません。

②連番、完納チェックのエラーがキャッチ出来るようにしたいです。

③下記エラーの対処方法で、

Uncaught (in promise)の発生条件と抑制方法 を参考にしてみたのですが、どのように修正すればいいのか分かりませんでした。

 

JavaScript自体独学で素人なのですが、PromiseやsweetAlert2もまだまだ理解できていない部分も多く、ご迷惑お掛けしますが、ご教示いただけると幸いです。

 

利用したソースコード

(() => {

    "use strict";

    kintone.events.on('app.record.index.show', function (event) {

        //viewId、ログインユーザー条件設定

        const userName = kintone.getLoginUser().name;

      if (userName !== "〇〇〇〇") {

            console.log(userName);

            return;

      } else if (event.viewId !== 9999999) {

            console.log(2);

            return;

        }

        console.log(3);

        const field = 'field_for_button'; //管理者用フィールド

        const records = event.records;

        let element = kintone.app.getFieldElements(field);

        //管理者用フィールドへボタンを配置

        for (let i in records) {

            let rec_id = records[i].$id.value;

            $(`

          <button id="button_${rec_id}" class="kintoneplugin-button-dialog-ok" name='${rec_id}'>

            ${records[i]['ボタン表示内容'].value}

          </button>

        `)

                .appendTo(element[i]);

        }

        $('.kintoneplugin-button-dialog-ok').on('click', function (e) {

            const id = $(this).attr('name');

            let record = "";

            for (let i in records) {

                if (records[i].$id.value == id) {

                    record = records[i];

                    //確認ダイアログ

                    Swal.fire({

                        title: '登録確認',

                        text: '仕入伝票へ登録しますか?',

                        icon: 'warning',

                        showCancelButton: true,

                        confirmButtonColor: '#3085d6',

                        cancelButtonColor: '#d33',

                        confirmButtonText: '実行する',

                        cancelButtonText: 'キャンセル',

                        //reverseButtons: true //確認キャンセルボタン位置逆転

                    }).then((result) => {

                        //キャンセル時

                        if (result.isDismissed) {

                            //何もしない

                            Swal.fire(

                                'キャンセル',

                                'キャンセルしました。',

                                'error',

                            );

                            console.log('キャンセルが選択されました。');

                            return event;

                        }

                        const postRecords = [];

                        const url = kintone.api.url('/k/v1/records.json', true)

                        const query = {

                          "app": 80,

                            "query": 'order by 仕入No desc limit 1'

                            //"query": '仕入No like "S-2021" order by 仕入No desc limit 1' //前期分として

                        };

                        return kintone.api(url, 'GET', query).then(function (resp) {

                            //ここに連番処理

                            const splitNumber = resp.records[0]['仕入No'].value.split('-'); // => ['S', '2022', '0001']

                            let serialNumber = Number(splitNumber[2]); // => 1

                            //console.log(splitNumber);

                            const recRecords = [];

                            let subTable = record.発注詳細.value;

                            serialNumber++; // => 2,3,4 ...

                            //  => S-2022-0002,S-2022-0003,S-2022-0004...

                            const newSerialNumber = ['S', '2022', ('000' + serialNumber).slice(-4)].join('-');

                            // サブテーブル分ループ

                            subTable.forEach(function (eachRow) {

                                let tableA = eachRow.value.商品名.value;

                                let tableB = eachRow.value.数量.value;

                                let tableC = eachRow.value.単位.value;

                                let tableD = eachRow.value.単価.value;

                                let tableE = eachRow.value.摘要.value;

                                //サブテーブル生成

                                recRecords.push({

                                    "value": {

                                        "商品名": { "value": tableA },

                                        "数量": { "value": tableB },

                                        "単位": { "value": tableC },

                                        "単価": { "value": tableD },

                                        "摘要": { "value": tableE }

                                    }

                                });

                            })

                            //レコード生成

                            postRecords.push({

                                "仕入先": { value: record.発注先.value },

                                "仕入日": { value: record.発注日.value },

                                "仕入No": { value: newSerialNumber }, //ここを連番にしたい

                                "発注No": { value: record.発注No.value },

                                "担当者": { value: record.担当者.value },

                                "仕入詳細": { value: recRecords },

                                "工番": { value: record.工番.value },

                                "科目名": { value: record.科目名.value }

                            });

                            const postParams = {

                              app: 80,

                                records: postRecords

                            };

                            //仕入伝票へpost

                            return kintone.api(kintone.api.url('/k/v1/records.json', true), 'POST', postParams, (resp) => {

                                // success

                                console.log(resp);

                            });

                        });

                    }).then(() => {

                        const params = {

                            app: event.appId,

                            query: kintone.app.getQuery()

                        }

                        const record_array = []

                        //仕入伝票へpostしたレコードの"納入チェック"フィールドを"完納"へ更新する

                        return kintone.api('/k/v1/records', 'GET', params, function (resp) {

                            const records = resp.records;

                            records.forEach(function (record) {

                                const record_obj = {

                                    "id": record['レコード番号']['value'],

                                    "record": {

                                        "納入チェック": {

                                            "value": "未納"

                                        }

                                    }

                                }

                                record_array.push(record_obj)

                            })

                            const put_params = {

                                app: event.appId,

                                records: record_array

                            }

                            return kintone.api('/k/v1/records', 'PUT', put_params, function (resp) {

                                //window.confirm('登録完了!' + '発注No  : ' + orderNumber + '発注先    : ' + orderTarget + '合計        : ' + orderTotal);

                                const orderNumber = record.発注No.value;

                                const orderTarget = record.発注先.value;

                                const orderTotal = record.合計.value;

                                Swal.fire({

                                    title: '登録',

                                    html: '登録完了!<br>発注No  : ' + orderNumber + '<br>発注先    : ' + orderTarget + '<br>合計        : ' + orderTotal,

                                    icon: 'success'

                                });

                                // 画面リロード

                                //location.reload();

                                return event;

                            });

                        });

                    }).then(() => {

                        return event;

                    }).catch((error) => {

                        event.error = error.message;

                        Swal.fire(

                            'エラー',

                            'エラーが発生しました。' + error.message,

                            'success'

                        );

                        console.log(error);

                        return event;

                    });

                }

            };

            console.log(record);

            console.log(record['発注No'].value);

        });

    });

})();

渡邉祐子 さん

キャンセルの処理で return event; をしてしまうことで

                   //キャンセル時
                       if(result.isDismissed) {
                           //何もしない
                            Swal.fire(
                               'キャンセル',
                               'キャンセルしました。',
                               'error',
                            );
                            console.log('キャンセルが選択されました。');
                           returnevent;
                      }

次のthenの処理が移ってしまってるんだと思います。

return event; ではなく、 throw new Error(‘Cancelled’); でエラーをスローしてしまって、最後の記載されてる catch 処理でキャンセルメッセージを表示すると良いかなと思いました。

}).catch((error) => {


    // キャンセル時のエラーを処理
    if (error.message === 'Cancelled') {
        console.log('キャンセルが選択されました。');
    } else {
        event.error = error.message;
        Swal.fire(
            'エラー',
            'エラーが発生しました。' + error.message,
            'error'
        );
        console.log(error);
    }

    return event;

});

 

 

細谷 崇

早速のご回答ありがとうございます。

いいえの場合は、処理をキャンセルさせることができました。

エラー処理についてですが、完納チェック(PUT)まで正常に完了したら、登録完了!を出すはずが、エラーの場合でも表示されてしまいます。

Promiseにより、PUTエラーでcatchに飛ぶと思っていたのですが、どこかにif分などが必要でしょうか?

渡邉祐子 様

以下のページの「Promiseを利用する(複数回)」の部分を読んでみると良いかなーと思いました。
https://cybozudev.zendesk.com/hc/ja/articles/360023047852-kintone%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8BPromise%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%AE%E5%9F%BA%E6%9C%AC

現在、渡邊様のコードはコールバック形式とPromise形式が混ざって記載されており、複雑になっています。上記ページに書いてるようにPromise形式に統一した方が不具合も起こりづらいかなーと思います。

returnkintone.api('/k/v1/records','PUT', put_params, function (resp) {
                               //window.confirm('登録完了!' + '発注No &nbsp;: ' + orderNumber + '発注先 &nbsp; &nbsp;: ' + orderTarget + '合計 &nbsp; &nbsp; &nbsp; &nbsp;: ' + orderTotal);
                               constorderNumber = record.発注No.value;

の部分がコールバック形式になっているので、PUTのエラーになっても最後に書かれてるcatch処理に飛ばないのかなーと思いました。

return kintone.api('/k/v1/records', 'PUT', put_params).then(function (resp) { // 正常処理 }).catch(function(error){ // エラー処理 });

にして、正常処理は次のthen処理で記載する、エラーの場合はcatch処理で処理をするようにすると良いのかなと。
PUTのところ以外のGETやPOSTの部分もPromise形式にされた方がコードもスッキリするかなと思います。

 

細谷 崇

ご回答遅くなり申し訳ありません。

又、ご丁寧な解説ありがとうございます。

まだコールバック関数とPromise形式の違いがぼんやりしていていますが、勉強しつつ修正していこうと思います。

貴重なお時間ありがとうございます。

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