一覧画面での絞り込みにドロップダウンを設置したい

[Legacy_Account1409 (gsc-hnd-dad（Legacy Account）)]

あるアプリの一覧画面上部にドロップダウンを設置し、アプリ内のドロップダウンフィールド（担当者）による絞り込みを行いたいのですが、教えて頂けませんか。

 

アプリ内ドロップダウン

・担当者｛A,B,C,D｝

 

上記と同内容の選択肢を持ったドロップダウンを一覧画面にセットしレコードの絞り込みを行いたいのです。

[Legacy_Account1072 (Zackey（Legacy Account）)]

APIで自アプリの設定を取得→ドロップダウンの項目を抽出、
select要素をdocument.createElementで作成し、optionとして項目を追加して
select要素をkintone.app.getHeaderMenuSpaceElementの子要素に追加という流れで実装できるかと思います。

どの程度まで
>>教えていただけませんか
という質問にお答えすればいいかわかりませんが、以下をご覧になれば多少プログラムをかけるのであればできます。

jQueryを使ったサンプルでよければコードを紹介することもできます。(私も同じようなことをしているので)

 

以下勉強に使えるもの

フォーム情報を取得

var body = {
'app': kintone.app.getId() //モバイルはkintone.mobile.app.getId();
};

kintone.api(kintone.api.url('/k/v1/form', true), 'GET', body, function(resp) {
// success
console.log(resp);
resp.properties['フィールドコード'].options //選択肢
}, function(error) {
// error
console.log(error);
});

レコード一覧にボタン設置

select要素にoptionタグを追加

＊注意事項：
URL内のクエリで、表示するレコードの条件を指定

(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
if (document.getElementById('my_index_button') !== null) {
return;
}

var myIndexButton = document.createElement('select');
myIndexButton.id = 'my_index_button';

//selectに選択肢を追加するには繰り返し処理で追加する

//変更イベントで絞り込みのurlを生成してlocation.href=生成したurlに移動

kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();

[Legacy_Account1409 (gsc-hnd-dad（Legacy Account）)]

岡崎様

 

返信ありがとうございます。実は私kintoneでのアプリ管理は任されてますがjsについては未だ素人同然で上記をうまく組み合わせられません。

アプリIDやフィールドコードの置換前提で全文頂くと非常に助かります。

[Legacy_Account1072 (Zackey（Legacy Account）)]

こちら動きますか？

 

(function() {
'use strict';
kintone.events.on('app.record.index.show', function(event) {
const view = 5738098;//一覧のID
const appId = kintone.app.getId();//アプリID
const field = 'ドロップダウン';//上記アプリの必要なドロップダウンのフィールドコード

//指定の一覧以外このJSを実行しない
if(event.viewId != view){
return;
}
//ボタンの増殖防止
if(document.getElementById('my-select')){
return;
}

//html要素のドロップダウンを生成
let d = document.createElement('select');
d.id = 'my-select';
//ヘッダーメニュースペースに作成した要素を子要素として追加
kintone.app.getHeaderMenuSpaceElement().appendChild(d);

//初期値を追加（必要なければ消す）
let ini = document.createElement('option');
ini.value = '';
ini.innerText = '----';
document.getElementById('my-select').appendChild(ini);
//（必要なければ消す--ここまで）

//指定のアプリのフォーム情報を取得
let body = {
app:appId
}
kintone.api(kintone.api.url('/k/v1/app/form/fields',true),'GET',body,(res) => {

let options = res.properties[field].options;
console.log(options);

//設定項目の数だけ選択肢として追加
Object.keys(options).forEach((op)=>{

let o = document.createElement('option');
o.value = options[op].label;
o.innerText = options[op].label;
document.getElementById('my-select').appendChild(o);

});

},(er)=>{
//エラーの場合はコンソールに出力
console.log(er);
});

//ドロップダウン変更時の処理
d.onchange = () => {
let value = document.getElementById('my-select').value;
let query = `${field} in ("${value}")`;

console.log(query);

location.href = location.origin + location.pathname + `?view=${view}&query=` + encodeURI(query);

};

});
})();