【kintone】Handsontable+SweetAlert2で複数選択入力

やりたいこと→Handsontableで複数選択フィールドの簡単入力

本当は複数選択ドロップダウンを作りたいのですが力及ばず。

ライブラリ

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

参考サイト

※SweetAlert2公式のサンプルはIE11で使えないアロー関数やasync/awaitが使われているので注意

JavaScript

※一部抜粋。kintone x handsontable · GitHubをベースにさせていただいています。

var container = document.getElementById('sheet');
var setting = [];
setting = {
    data: data,
    columns: [
        {data: "複数選択.value", title:"複数選択", renderer: wordWrapRenderer, editor: false},
    ],
};
//改行表示用
function wordWrapRenderer(instance, td, row, col, prop, value, cellProperties) {
    td.innerHTML = value.join('<br>');
    td.className = 'multipleselection';
    return td;
}
hot = new Handsontable(container, setting);
//モーダル表示用
var hooksAdd = function(row, col, TD){
    if(!TD.classList.contains("multipleselection"))return;
    //選択肢を取得し、モーダル内のhtmlを作る
    kintone.api(kintone.api.url('/k/v1/form', true), 'GET', {app: kintone.app.getId()}, function(form) {
        var lists = [];
        var f = hot.getSourceData(row,col,row,col)[0];
        for(var key in f){
            key = key.replace('.value', '');
            var formProps = form.properties;
            for(let i = 0; i < formProps.length; i++){
                if(formProps[i].code === key){
                   lists =  formProps[i].options;
                }
            }
        }
        var mycell = hot.getDataAtCell(row, col);
        var html = '';
        for(let i = 0; i < lists.length; i++){
            html += '<label><input type="checkbox" name = "msform" id="' + lists[i] + '" value="' + lists[i] + '"';
            if(mycell){
                for(let ii = 0; ii < mycell.length; ii++){
                    if(lists[i].indexOf(mycell[ii]) >= 0){
                        html += ' checked="checked"';
                    }
                }
            }
            html += '>' + lists[i] + '</label><br>';
        }
        //SweetAlert2使用部分
        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) {
            hot.setDataAtCell(row, col, select.value);
            hot.selectCell(row + 1, col);
            }
        });
    });
};
//キーボードを押下した時のイベント
Handsontable.hooks.add('beforeKeyDown', function(e){
    if(e.keyCode === 13){
        var row = hot.getSelected()[0][0];
        var col = hot.getSelected()[0][1];
        hooksAdd(row, col, hot.getCell(row,col));
    }
});
//マウスでクリックした時のイベント
Handsontable.hooks.add('beforeOnCellMouseDown', function(event, coords, TD){
    hooksAdd(coords.row, coords.col, TD);
});