kyoden様
お世話になっております．
返信遅くなりました．
下記JavaScriptとCSSを順に読み込ませて実装できます．
・generateUrl.js
const generateUrl = (baseUrl, params = {}) => {
let queryParams = []
if (params !== [] && params !== {}) {
const add = (key, value) => {
// if value is a function then call it and assign it's return value as value
value = (typeof value === 'function') ? value() : value
// change null to empty string
value = (value === null) ? '' : value
queryParams.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
}
const buildQueryParams = (prefix, params, add) => {
const rbracket = new RegExp(/\[\]$/)
if (params instanceof Array) {
params.forEach((val, i) => {
if (rbracket.test(prefix)) {
add(prefix, val)
} else {
buildQueryParams(prefix + '[' + (typeof val === 'object' ? i : '') + ']', val, add)
}
})
} else if (typeof params === 'object') {
for (let name in params) {
buildQueryParams(prefix + '[' + name + ']', params[name], add)
}
} else {
add(prefix, params)
}
}
for (let prefix in params) {
buildQueryParams(prefix, params[prefix], add)
}
return baseUrl + '?' + queryParams.join('&').replace(/%20/g, '+')
} else {
return baseUrl
}
}
・MyLookUp.js
MyLookUp = (function(fieldSettings, state){
function MyLookUp(fieldSettings, state) {
this.fieldSettings = fieldSettings;
this.state = state;
}
MyLookUp.prototype = {
createModal: function(){
var _this = this;
this.modal = document.createElement('div');
this.modalTable = document.createElement('table');
this.modalTbody = document.createElement('tbody');
this.modal.classList.add('lookUpModal');
this.modalTable.classList.add('lookUpModalTable');
this.modalTable.innerHTML = (
'<thead><tr>' +
this.fieldSettings.viewFields.reduce(function(columns, viewField){
return columns + '<th>' + viewField + '</th>';
}, '') +
'<th>取得</th>' +
'</tr></thead>'
);
this.modal.addEventListener('click', function(e){
if(e.target === _this.modal){
_this.removeModal();
}
});
this.modalTbody.addEventListener('click', function(e){
if(e.target.classList.contains('modalGetButton')){
_this.copyDatas(_this.records[e.target.getAttribute('data-index')]);
}
});
this.modalTable.appendChild(this.modalTbody);
this.modal.appendChild(this.modalTable);
document.body.appendChild(this.modal);
return this;
},
showModal: function(){
var _this = this;
this.modalTbody.innerHTML =(
_this.records.reduce(function(rows, record, index){
return (
rows +
'<tr>' +
_this.fieldSettings.viewFields.reduce(function(columns, viewField){
return columns + '<td>' + record[viewField].value + '</td>';
}, '') +
'<td><a class="modalGetButton" data-index="' + index + '">取得</a></td>' +
'</tr>'
)
}, '')
);
this.modal.classList.add('on');
},
removeModal: function(){
this.modal.classList.remove('on');
},
createGetButton: function(){
var _this = this;
this.getButton = document.createElement('a');
this.getButton.innerHTML = '取得';
this.getButton.classList.add('lookUpButton');
this.getButton.addEventListener('click', function(){
var xhr = new XMLHttpRequest();
xhr.open('GET', generateUrl(_this.fieldSettings.apiUrl, {
additionalFilters: _this.fieldSettings.filterFields.filter(function(filterField){
return _this.state.record[filterField.to].value;
}).map(function(filterField){
return {
with: 'and',
field: filterField.from,
sign: filterField.sign,
value: _this.state.record[filterField.to].value
};
})
}));
xhr.addEventListener('load', function(){
var records = JSON.parse(xhr.response).records
if(!records.length){
alert('データがありません。');
}else if(records.length === 1){
_this.copyDatas(records[0]);
}else{
_this.records = records;
_this.showModal();
}
});
xhr.send();
});
fb.getElementByCode(this.fieldSettings.buttonSpace).appendChild(this.getButton);
return this;
},
copyDatas: function(record){
var _this = this;
this.fieldSettings.filterFields.concat(this.fieldSettings.copyFields).forEach(function(field){
_this.state.record[field.to].value = record[field.from].value;
});
this.removeModal();
}
}
return MyLookUp;
})();
・sample.js
(function() {
"use strict"
fb.events.form.mounted = [function(state){
var lookUpParams = {
apiUrl: 'https://viewer.kintoneapp.com/public/api/records/ **** /1', //外部公開APIのURL
buttonSpace: 'label', //ボタン設置用のスペースィールド
filterFields: [ //検索条件のフィールド
{to: '銀行名', from: '銀行名', sign: 'like'},
{to: '支店名', from: '支店名', sign: 'like'},
],
copyFields: [ //コピーするフィールド
{to: '銀行コード', from: '銀行コード'},
{to: '支店コード', from: '支店コード'},
],
viewFields: ['銀行コード', '支店コード', '銀行名', '支店名'] //ポップアップに表示するフィールド
};
new MyLookUp(lookUpParams, state).createGetButton().createModal();
}];
})()
・MyLookUp.css
.lookUpModal{
display: none;
position: fixed;
background: rgba(0,0,0,.3);
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.lookUpModal.on{
display: block;
}
.lookUpModalTable{
position: fixed;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
border-collapse: collapse;
}
.lookUpModalTable th,
.lookUpModalTable td{
border: 1px solid #000;
padding: 10px;
}
.lookUpModalTable a,
.lookUpButton{
cursor: pointer;
}