【kintone】Handsontable+SweetAlert2でルックアップ入力

やりたいこと→Handsontableでルックアップフィールドの簡単入力

ライブラリ

Handsontable(v6.2.2)
SweetAlert2(v7.33.1)

参考サイト

• Handsontableを使ってkintoneをExcelライクに入力しよう その2 – cybozu developer network
• kintone x handsontable · GitHub
• SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

JavaScript

※一部抜粋。kintone x handsontable · GitHubをベースにさせていただいています。
saveRecords関数、getRecords関数については上記をご覧ください。

var searched = false; //ループ防止用
var container = document.getElementById('sheet');
var setting = [];
setting = {
    data: data,
    columns: [
        {data: "ルックアップ.value", type:'text', className: 'lookup'},
    ],
    afterChange: function (change, source) {
        var self = this;
        // データ読み込み時はイベントを終了
        if (source === 'loadData') {
            return;
        }
        var c = change;
        var TD = hot.getCell(c[0][0],hot.propToCol(c[0][1]));
        if(TD.classList.contains("lookup")){
            if(!searched){
                //クラス名「lookup」、searchedがfalseの時lookupFunc関数を実行
                lookupFunc(change);
            }else{
                saveRecords(hot.getSourceData(), change, function(resp){
                    getRecords(function(resp){
                        hot.loadData(resp.records);
                    });
                });
                searched = false;
            }
        }else{
            // kintoneのレコードを更新、追加する
            saveRecords(this.getSourceData(), change, 
                function(resp){
                    console.dir(resp);
                    getRecords(function(resp){
                        self.loadData(resp.records);
                    },
                    function(resp){
                        console.dir(resp);
                    });
                }, 
                function(resp){
                    console.dir(resp);
                });
        }
    }
};
hot = new Handsontable(container, setting);
//モーダル表示用
var lookupFunc = function(change){
    var row = change[0][0];
    var col = hot.propToCol(change[0][1]);
    var afterValue = change[0][3];
    //変更後セルが空の時はすぐ更新
    if(afterValue === ""){
        searched = true;
        hot.setDataAtCell(row,col, '');
        hot.selectCell(row + 1, col);
    }else{
        var lookupField = change[0][1].replace('.value', '');
        var LookupTargetAppId = kintone.app.getLookupTargetAppId(lookupField);
        //ルックアップコピー元フィールドの取得用
        kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {app:kintone.app.getId()}, function(resp) {
            var lookupTargetField = resp.properties[lookupField].lookup.relatedKeyField;
            //ルックアップコピー元のアプリ内を検索
            kintone.api('/k/v1/records', 'GET', {app: LookupTargetAppId, query: lookupTargetField +' like "' + afterValue + '"', fields: [lookupTargetField]}, function(resp) {
                var records = resp.records;
                switch(records.length){
                    case 0:  //検索結果0の時、該当なしモーダルの表示
                        Swal.fire({
                            title: '該当なし',
                            animation: false,
                            onClose: function(){
                                searched = true;
                                hot.setDataAtCell(row,col, '');
                                hot.selectCell(row, col);
                            }
                        });
                        break;
                    case 1:  //検索結果が1つの時、値をセット
                        searched = true;
                        hot.setDataAtCell(row,col, records[0][lookupTargetField].value);
                        break;
                    default :  //検索結果をラジオボタンで表示
                        var html = '';
                        for(let i = 0; i < records.length; i++){
                            var myvalue = records[i][lookupTargetField].value;
                            html += '<label class="radio"><input type="radio" name = "msform" id="' + myvalue + '" value="' + myvalue + '"'
                            + '>' + myvalue + '</label><br>';
                        }
                        Swal.fire({
                            html:html,
                            preConfirm: function(){
                                var mytext = [];
                                var msform = document.getElementsByName("msform");
                                for (let i = 0; i < msform.length; i++){
                                    if(msform[i].checked){
                                    mytext.push(msform[i].value);
                                    }
                                }
                                return mytext;
                                },
                                animation: false,
                        }).then(function(select){
                            if (select.value) {
                                searched = true;
                                hot.setDataAtCell(row, col, select.value[0]);
                                hot.selectCell(row + 1, col);
                            }
                        });
                        break;
                }
            });
        });
    }
};