お世話になっております。
テーブルにボタンを作り、
クリックすると、
クリックした行のJANコードを条件とした、
他のアプリである在庫マスタの在庫数のデータを参照したモーダルウィンドウを表示したいです。
下記のコードの場合、以下エラーがあり、
理想通り動かすことができません。
原因やアドバイスをいただければ幸いです。
【エラー】
①APIでGETする前にダイアログ表示の内容のコードに進んでしまい、
CD102～CD170の値がundefinedでエラー
②追加した行にボタン作成＆その行のJANコードを取得することができない
（ロジックを考えることができず…何かいい案がありましたらご教授いただければ幸いです）
// 他店舗在庫情報のボタン作成
kintone.events.on(['app.record.create.change.jan', 'app.record.edit.change.jan'], (event) => {
//ボタンを置きたいフィールドの情報を取ってくる
const sp = document.getElementsByClassName("field-5525974");
// 入力欄非表示
const hide = document.getElementsByClassName("value-5525974");
let record = event.record
for (var i in record['order_items'].value) {
var jan = record.order_items.value[i].value.jan.value;
var zaikoBtnID = "zaikoBtn" + jan;
//ボタンがない場合
if (document.getElementById(zaikoBtnID) === null) {
hide[i].style.display = "none";
//ボタンを作る
const btn = document.createElement("button");
btn.textContent = "開く";
sp[i].appendChild(btn);
btn.setAttribute("id", zaikoBtnID);
}
}
//在庫アプリのID
var appID = 398;
var query = 'code = "' + jan + '"order by deliStore asc';
var body = {
'app': appID,
'query': query
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function (resp) {
// success
for (let j = 0; j < resp.records.length; j++) {
var deliStore = resp.records[j].deliStore.value;
var zaiko = resp.records[j].zaiko.value;
var CD102 = "-";
var CD103 = "-";
var CD104 = "-";
var CD107 = "-";
var CD108 = "-";
var CD109 = "-";
var CD110 = "-";
var CD112 = "-";
var CD116 = "-";
var CD118 = "-";
var CD120 = "-";
var CD127 = "-";
var CD132 = "-";
var CD134 = "-";
var CD136 = "-";
var CD137 = "-";
var CD138 = "-";
var CD140 = "-";
var CD143 = "-";
var CD145 = "-";
var CD146 = "-";
var CD147 = "-";
var CD163 = "-";
var CD165 = "-";
var CD170 = "-";
if (deliStore == "102") {
CD102 = zaiko;
} else if (deliStore == "103") {
CD103 = zaiko;
} else if (deliStore == "104") {
CD104 = zaiko;
} else if (deliStore == "107") {
CD107 = zaiko;
} else if (deliStore == "108") {
CD108 = zaiko;
} else if (deliStore == "109") {
CD109 = zaiko;
} else if (deliStore == "110") {
CD110 = zaiko;
} else if (deliStore == "112") {
CD112 = zaiko;
} else if (deliStore == "116") {
CD116 = zaiko;
} else if (deliStore == "118") {
CD118 = zaiko;
} else if (deliStore == "120") {
CD120 = zaiko;
} else if (deliStore == "127") {
CD127 = zaiko;
} else if (deliStore == "132") {
CD132 = zaiko;
} else if (deliStore == "134") {
CD134 = zaiko;
} else if (deliStore == "136") {
CD136 = zaiko;
} else if (deliStore == "137") {
CD137 = zaiko;
} else if (deliStore == "138") {
CD138 = zaiko;
} else if (deliStore == "140") {
CD140 = zaiko;
} else if (deliStore == "143") {
CD143 = zaiko;
} else if (deliStore == "145") {
CD145 = zaiko;
} else if (deliStore == "146") {
CD146 = zaiko;
} else if (deliStore == "147") {
CD147 = zaiko;
} else if (deliStore == "163") {
CD163 = zaiko;
} else if (deliStore == "165") {
CD165 = zaiko;
} else if (deliStore == "170") {
CD170 = zaiko;
}
}
}, function (error) {
// error
console.log(error);
});
//モーダルの内容
//ダイアログを表示する関数を作成
var showDialog = function () {
$('.dialog_content').dialogModal({
topOffset: 0,
top: '10%',
type: '',
onOkBut: function () { },
onCancelBut: function () { },
onLoad: function (el, current) { },
onClose: function () { },
onChange: function (el, current) { }
});
};
//ダイアログと表示内容を用意 ※①
var createDialogContent = function () {
var dialog_1 =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">JAN:' + jan + '</div>' +
'<div class="dialogModal_content">' +
'<table border="1px">' +
'<tr><td>店舗</td><td>在庫数</td></tr>' +
'<tr><td>102 XX</td><td>' + CD102 + '</td></tr>' +
'<tr><td>103 XX</td><td>' + CD103 + '</td></tr>' +
'<tr><td>104 XX</td><td>' + CD104 + '</td></tr>' +
'<tr><td>107 XX</td><td>' + CD107 + '</td></tr>' +
'<tr><td>108 XX</td><td>' + CD108 + '</td></tr>' +
'<tr><td>109 XX</td><td>' + CD109 + '</td></tr>' +
'<tr><td>110 XX</td><td>' + CD110 + '</td></tr>' +
'<tr><td>112 XX</td><td>' + CD112 + '</td></tr>' +
'<tr><td>116 XX</td><td>' + CD116 + '</td></tr>' +
'<tr><td>118 XX</td><td>' + CD118 + '</td></tr>' +
'<tr><td>120 XX</td><td>' + CD120 + '</td></tr>' +
'<tr><td>127 XX</td><td>' + CD127 + '</td></tr>' +
'<tr><td>132 XX</td><td>' + CD132 + '</td></tr>' +
'<tr><td>134 XX</td><td>' + CD134 + '</td></tr>' +
'<tr><td>136 XX</td><td>' + CD136 + '</td></tr>' +
'<tr><td>137 XX</td><td>' + CD137 + '</td></tr>' +
'<tr><td>138 XX</td><td>' + CD138 + '</td></tr>' +
'<tr><td>140 XX</td><td>' + CD140 + '</td></tr>' +
'<tr><td>143 XX</td><td>' + CD143 + '</td></tr>' +
'<tr><td>145 XX</td><td>' + CD145 + '</td></tr>' +
'<tr><td>146 XX</td><td>' + CD146 + '</td></tr>' +
'<tr><td>147 XX</td><td>' + CD147 + '</td></tr>' +
'<tr><td>163 XX</td><td>' + CD163 + '</td></tr>' +
'<tr><td>165 XX</td><td>' + CD165 + '××</td></tr>' +
'<tr><td>170 XX</td><td>' + CD170 + '</td></tr></table></br>' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>');
$("#" + zaikoBtnID).append(dialog_1);
};
createDialogContent();
var zaikoBtn = $("#" + zaikoBtnID);
//マウスをボタンに当てるときのボタン色を指定
zaikoBtn.hover(function () {
$(this).css({ 'color': '#ececec', 'background': '#3498db' });
}, function () {
$(this).css({ 'color': '', 'background': '' });
});
//ボタンをクリックしたときの動作
zaikoBtn.on('click', showDialog);
return event;
});
以上、よろしくお願いいたします。