ルックアップの絞り込みを行う

kintone カスタマイズ
1

ルックアップの機能では、あらかじめ決められた絞り込みしかできず、動的な絞り込みができませんでした。

動的絞り込みを実装したいと思って試行錯誤した結果、どうにかできましたので、同じ悩みをお持ちの方への一助となればと思い、投稿しておきます。

 

Dropでルックアップの検索範囲を狭めるカスタマイズです。

・Dropで絞り込みをし、絞り込んだ検索結果がspaceに出てきます。

・ボタンを押すとルックアップフィールドへ値が入ります。

・再度ルックアップフィールドで"取得"を押す必要があります。

・テーブルで追加していけるようになっています。

・kintone-js-sdk.min.js、51-modern-default_widthchange.cssと一緒に使う前提になっています。

 

変数は以下の通りです。
Drop：ルックアップ検索範囲指定。ドロップダウンを想定。
space：検索結果を表示させるスペース名
itemAppId:ルックアップ元アプリ番号
params:検索条件
LookupTable:ルックアップするテーブル
Lookup:ルックアップフィールド

ルックアップ元アプリの設定
itemName:Dropで絞り込む項目
itemNameCodeLabel:レコードごとの固有コード(値の重複禁止)。ルックアップのコピー元フィールド。

 

「N:N（複数対複数）の関連レコード一覧を自作する」を参考にしたので、その名残が残っています。

(function() {
'use strict';

var events = [
'app.record.create.change.Drop',
'app.record.edit.change.Drop'
];

kintone.events.on(events, function(event) {
var record = event.record;
var Drop=record.Drop.value;
var useTable=record.LookupTable.value;
var itemAppId=19;

//スペースを空にする
kintone.app.record.getSpaceElement("space").innerHTML = "";

// To HTML escape
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/\</g, '&lt;')
.replace(/\>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

// スペースを取得
var subtableSpace = kintone.app.record.getSpaceElement('space');

// Rest API
var params = {
'app': itemAppId,
'query': 'itemName ="' + Drop + '"',
'fields': ['$id', 'itemNameCodeLabel']
};

kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {

// Dropの製品名の一覧をスペースに表示し、ボタンを置く。
var tableRecords = resp.records;
var studentTable = '\<table class="kintoneplugin-table"\>';
studentTable += '\<thead\>';
studentTable += '\<tr\>';
studentTable += '\<th class="kintoneplugin-table-th" style="width: 50px;"\>';
studentTable += '\<div class="title"\>';
studentTable += '個別コード';
studentTable += '\</div\>';
studentTable += '\</th\>';
studentTable += '\<th class="kintoneplugin-table-th" style="width: 50px;"\>';
studentTable += '\<div class="title"\>';
studentTable += 'ルックアップボタン';
studentTable += '\</div\>';
studentTable += '\</th\>';
studentTable += '\</tr\>';
studentTable += '\</thead\>';
studentTable += '\<tbody\>';

for (var i = 0; i \< tableRecords.length; i++) {
studentTable += '\<tr\>';
studentTable += '\<td\>';
studentTable += '\<div class="kintoneplugin-table-td-control"\>';
studentTable += '\<a href="/k/'+itemAppId+'/show#record=' + escapeHtml(tableRecords[i].$id.value);
studentTable += '" target="\_blank"\>';
studentTable += escapeHtml(tableRecords[i].itemNameCodeLabel.value);
studentTable += '\</a\>';
studentTable += '\</div\>';
studentTable += '\</td\>';
studentTable += '\<td\>';
studentTable += '\<div class="kintoneplugin-table-td-control"\>';
studentTable += '\<button id="btn" name="BTN"\>コピー\</button\>';
studentTable += '\</div\>';
studentTable += '\</td\>';

studentTable += '\</tr\>';
}
studentTable += '\</tbody\>';
studentTable += '\</table\>';
subtableSpace.innerHTML = studentTable;

//ルックアップボタンの機能。
var btn = document.getElementsByName('BTN');
  for (let j = 0; j \< tableRecords.length; j++) {
 &nbsp;
  btn[j].addEventListener("click",() =\> {
if(useTable[0].value.Lookup.value===""){
useTable[0]={
"value": {
Lookup:{type:"SINGLE\_LINE\_TEXT",value:tableRecords[j].itemNameCodeLabel.value}
}&nbsp;
};

}
else{
useTable.push({
"value": {
Lookup:{type:"SINGLE\_LINE\_TEXT",value:tableRecords[j].itemNameCodeLabel.value}
}&nbsp;
});
}

record.LookupTable.value=useTable;
kintone.app.record.set(event);

});
  }
 &nbsp;

}, function(error) {
// error:エラーの場合はメッセージを表示する
var errmsg = 'レコード取得時にエラーが発生しました。';
// レスポンスにエラーメッセージが含まれる場合はメッセージを表示する
if (typeof error.message !== 'undefined') {
errmsg += '' + error.message;
}
subtableSpace.appendChild(document.createTextNode(errmsg));
});

return event;

});

})();