新規投稿
フォローする

自作ルックアップをアプリ内に複数個配置

JavaScript初心者のものです。
下記、参照記事を元に、アプリ内に動的ルックアップを複数個配置したいと思っております(最大20個)

■参照記事:自作ルックアップで参照アプリを動的に変更
https://developer.cybozu.io/hc/ja/community/posts/360017928983-%E8%87%AA%E4%BD%9C%E3%83%AB%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E5%8F%82%E7%85%A7%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E5%A4%89%E6%9B%B4

■現状行ったこと
対象アプリ内に自作ルックアップ用のフィールドを5個用意し、参照記事のコードを頭からおしりまで5回繰り返して、データの取得はできています。
※コードは繰り返しで長いので1商品のみアップしています。
※フィールドコードは1商品ごとに変更。


■現状の問題点として
上記クリアボタンについてですが、例えばカテゴリ1から2、3・・・順に商品を取得し、
カテゴリ5から4、3・・・順にクリアしていく場合は、下から1行ずつクリアされますが、
カテゴリ1から2、3・・・順に商品を取得し、カテゴリ1のクリアボタンを押した場合は、
全商品がクリアされてしまいます。
クリアボタンを押した行のみ削除したいのですが、どこを修正すればよいか
アドバイスをいただけますでしょうか、宜しくお願いいたします。

 

JavaScript

(function() {
"use strict";
// コンストラクタ定義
var MyLookUp = (function(fieldSettings){
function MyLookUp(fieldSettings) {
this.fieldSettings = fieldSettings;
}
MyLookUp.prototype = {
createModal: function(){
var _this = this;
this.modal = document.createElement('div');
this.modalTableWrapper = document.createElement('div');//102cus モーダルウィンドウのスクロール対応
this.modalTable = document.createElement('table');
this.modalTbody = document.createElement('tbody');
this.modal.classList.add('lookUpModal');
this.modalTableWrapper.classList.add('lookUpModalTableWrapper');//102cus モーダルウィンドウのスクロール対応
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);*/ //102cus モーダルウィンドウのスクロール対応でコメント
this.modalTableWrapper.appendChild(this.modalTable); //102cus モーダルウィンドウのスクロール対応
this.modal.appendChild(this.modalTableWrapper); //102cus モーダルウィンドウのスクロール対応
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 query;
_this.event = kintone.app.record.get();
if(_this.event.record[_this.fieldSettings.copyField.to].value){
query = _this.fieldSettings.copyField.from + '="' + _this.event.record[_this.fieldSettings.copyField.to].value + '"';
if(_this.fieldSettings.query)
query += (' and ' + _this.fieldSettings.query);
}else{
query = _this.fieldSettings.query;
}
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: _this.fieldSettings.apps[_this.event.record[_this.fieldSettings.appSelectField].value],
query: query + _this.fieldSettings.sort
}).then(function(response){
if(!response.records.length){
alert('データがありません。');
}else if(response.records.length === 1){
_this.copyDatas(response.records[0]);
}else{
_this.records = response.records;
_this.showModal(response.records);
}
});
});
return this;
},
createClearButton: function(){
var _this = this;
this.clearButton = document.createElement('a');
this.clearButton.classList.add('lookUpButton');
this.clearButton.innerHTML = 'クリア';
this.clearButton.addEventListener('click', function(){
_this.clearDatas();
});
return this.clearButton;
},
showButtons: function(){
kintone.app.record.getSpaceElement(this.fieldSettings.buttonSpace).classList.add('lookUpButtonSpace');//102cus 取得ボタンを下部に配置
kintone.app.record.getSpaceElement(this.fieldSettings.buttonSpace).appendChild(this.getButton);
kintone.app.record.getSpaceElement(this.fieldSettings.buttonSpace).appendChild(this.createClearButton());
return this;
},
copyDatas: function(record){
var _this = this;
this.event.record[this.fieldSettings.copyField.to].value = record[this.fieldSettings.copyField.from].value;
this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
_this.event.record[otherCopyField.to].value = record[otherCopyField.from].value;
});
this.event.record[this.fieldSettings.recordIdField].value = record.型番.value;//102cus 別テーブルと紐づけるフィールド名称キー
kintone.app.record.set(this.event);
this.removeModal();
//alert('参照先からデータが取得されました。');
},
clearDatas: function(record){
var _this = this;
this.event.record[this.fieldSettings.copyField.to].value = null;
this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
_this.event.record[otherCopyField.to].value = null;
});
this.event.record[this.fieldSettings.recordIdField].value = null;
kintone.app.record.set(this.event);
},
disableOtherCopyFields: function(event){
this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
event.record[otherCopyField.to].disabled = true;
});
event.record[this.fieldSettings.recordIdField].disabled = true;
//kintone.app.record.setFieldShown(this.fieldSettings.recordIdField, false);
return event;
},
createLink: function(event){
kintone.app.record.getFieldElement(this.fieldSettings.copyField.to).innerHTML = (
'<a href="../' +
this.fieldSettings.apps[event.record[this.fieldSettings.appSelectField].value] +
'/show#record=' +
event.record[this.fieldSettings.recordIdField].value +
'" target="_blank">' +
event.record[this.fieldSettings.copyField.to].value +
'</a>'
);
},
createLinks: function(event){
var _this = this;
event.records.forEach(function(record, index){
kintone.app.getFieldElements(_this.fieldSettings.copyField.to)[index].innerHTML = (
'<div><a href="../' +
_this.fieldSettings.apps[record[_this.fieldSettings.appSelectField].value] +
'/show#record=' +
record[_this.fieldSettings.recordIdField].value +
'" target="_blank">' +
record[_this.fieldSettings.copyField.to].value +
'</a></div>'
);
});
}
}
return MyLookUp;
})();

// ここから要編集(フィールド設定)
var lookUpParams = {
appSelectField: 'カテゴリ11', //関連付けるアプリを決めるフィールド //102cus ラジオボタン&ドロップボタン可
buttonSpace: 'space11', //ボタン設置用のスペースフィールド //102cus スペースの要素IDを設定
recordIdField: '商品番号11', //参照レコードのレコード番号保存用のフィールド //102cus 数値レコードで配置し商品マスタのレコードを引っ張る
apps: { //関連付けるアプリ
 不用品: 28, //関連付けるアプリを決めるフィールドのvalue: アプリID //102cus
家屋片付け: 40,
},
copyField: {
to: '商品番号11', //自作のルックアップフィールド /102 商品番号を呼び出す部分、文字列レコードで構成
from: '型番' //コピー元のフィールド //102cus 商品マスタ側の文字列レコードの型番
},
otherCopyFields: [ //ほかのフィールドのコピー
{to: '文字列コピー', from: '商品名'},
{to: '単価11', from: '価格'},
],
viewFields: ['型番', '商品名', '価格'], //コピー元のレコードの選択時に表示するフィールド
query: ' 更新日時 > "2018-07-27T09:00:00+0900" ', //絞り込み
sort: ' order by レコード番号 asc ' //ソート
};
// ここまで要編集

var lookUP = new MyLookUp(lookUpParams).createGetButton().createModal();
kintone.events.on([
'app.record.index.show'
], function(event){
return lookUP.createLinks(event);
});
kintone.events.on([
'app.record.detail.show'
], function(event){
return lookUP.createLink(event);
});
kintone.events.on([
'app.record.create.show',
'app.record.edit.show'
], function(event){
lookUP.event = event;
return lookUP.showButtons().disableOtherCopyFields(event);
});
})();
//2商品目------------------------------------------------------------------------
//繰り返し・・・

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{ //102CUS モーダルウィンドウのスクロール対応でコメント*/
.lookUpModalTableWrapper{/*102CUS モーダルウィンドウのスクロール対応*/
position: fixed;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 65vh;/*102CUS 高さを指定しているので中身が超えた分はスクロールできるように*/
overflow-y:scroll;/*102CUS 高さを指定しているので中身が超えた分はスクロールできるように*/
}
.lookUpModalTable th,
.lookUpModalTable td{
border: 1px solid #000;
padding: 10px;
}
.lookUpButton{
padding: 5px;
}
.lookUpButtonSpace{
position: absolute;
bottom: 0;
}
0

6件のコメント

Avatar
江田篤史

t.satoさん

申し訳ございません.
バグです.

121行目のclearDatasを修正してください.

clearDatas: function(record){
  var _this = this;
  this.event = kintone.app.record.get(); //追加
  this.event.record[this.fieldSettings.copyField.to].value = null;
  this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
    _this.event.record[otherCopyField.to].value = null;
  });
  this.event.record[this.fieldSettings.recordIdField].value = null;
  kintone.app.record.set(this.event);
},
0
Avatar
t.sato

江田様

返信ありがとうございます。
助かりました、解決いたしました。

すみません、追加で気になる点があるのですが、
動的ルックアップ反映後、対象アプリの一覧画面で、右側のエラーが表示されてしまうのですが(153行目:黄色部分)
もしお分かりになればお教えいただけますでしょうか。宜しくお願いいたします。

0
Avatar
江田篤史

t.satoさん

ルックアップのセルにリンクを貼るところでエラーが出ていますね.
一覧にルックアップを表示しなかった場合用に,例外処理が必要ですね.

createLinks: function(event){
  var _this = this;
  if(!kintone.app.getFieldElements(_this.fieldSettings.copyField.to)) return; //追加
  event.records.forEach(function(record, index){
    kintone.app.getFieldElements(_this.fieldSettings.copyField.to)[index].innerHTML = (
      '<div><a href="../' +
      _this.fieldSettings.apps[record[_this.fieldSettings.appSelectField].value] +
      '/show#record=' +
      record[_this.fieldSettings.recordIdField].value +
      '" target="_blank">' +
      record[_this.fieldSettings.copyField.to].value +
      '</a></div>'
    );
  });
}

見落としが多くて申し訳ございません.

江田篤史により編集されました
0
Avatar
t.sato

江田様

いただいた内容を追記してみましたのですが、 Unexpected identifierとエラーが表示されてしまい
考えられるところに「)」などつけてみたのですが解決できなかった為、再度教えいただけますでしょうか。
何度も申し訳ありません。

0
Avatar
江田篤史

t.satoさん

たびたび申し訳ございません.

こちらでお願いいたします.

createLinks: function(event){
  var _this = this;
  if(!kintone.app.getFieldElements(_this.fieldSettings.copyField.to)) return; //追加
  event.records.forEach(function(record, index){
    kintone.app.getFieldElements(_this.fieldSettings.copyField.to)[index].innerHTML = (
      '<div><a href="../' +
      _this.fieldSettings.apps[record[_this.fieldSettings.appSelectField].value] +
      '/show#record=' +
      record[_this.fieldSettings.recordIdField].value +
      '" target="_blank">' +
      record[_this.fieldSettings.copyField.to].value +
      '</a></div>'
    );
  });
}
0
Avatar
t.sato

江田様

返信ありがとうございます。
なるほど、spanの部分が不要だったのですね。勉強不足でした。
無事エラーもなくなり助かりました。

1
サインインしてコメントを残してください。