REST APIにて取得したフォーム(プルダウン)を一覧画面に表示したい。

初投稿・プログラミング初心者です。よろしくお願いします。

 

・実現したいこと

アプリのレコード一覧画面にて、レコード追加画面で設定した値を持つドロップダウンフォームを表示したい。

(ゆくゆくは、そのドロップダウンリストの値を利用して検索画面を介さずに検索をかけられるようにしたいのですが、今は表示するところまでやってみたいです)

 

・進捗

var body = {
“app”: 1
};

// REST APIにてフォームの情報を取得
kintone.api(kintone.api.url(‘/k/v1/app/form/fields’, true), ‘GET’, body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});

 

上記REST APIを使用してレコード一覧表示時にフォームの情報を取得することはできました。

恐らくindexの値を使ってlabelを取得し代入、ドロップダウンを作成すればいいんだろうということまでは分かるのですが、 REST APIで取得した値をどうすれば活用できるかが分からず 手詰まり気味です。

お手数ですが、解答頂ければ幸いです。

okamoさん

RestAPIでレコードをGETして、そのフィールド値をドロップダウンの項目として使いたいということでよろしいでしょうか?

その場合以下のように実装が可能です。 ドロップダウンの場所もスペースフィールドを利用することで任意の場所に表示可能です。

 

function createDropDown(record) {
 var select = document.createElement('select'); // selectを作成

 // 取得したレコードに設定されたフィールド値をoptionをに設定する
 var field1 = record['フィールド1'].value;
 var option1 = document.createElement('option'); // option作成
 option1.setAttribute('value', field1); // optionのvalueを設定
 option1.innerHTML = field1; // optionの表示名を設定
 select.appendChild(option1); // selectにoptionを設定


 var field2 = record['フィールド2'].value;
 var option2 = document.createElement('option');
 option2.setAttribute('value', field2);
 option2.innerHTML = field2;
 select.appendChild(option2);

 // ヘッダースペースにドロップダウンを表示
 var header = document.getElementsByClassName('kintone-app-record-headermenu-space')[0];
 header.appendChild(select);
}


var body = {
 "app": 1,
 "id": 1001
};
kintone.api(kintone.api.url('/k/v1/record', true), 'GET', body, function(resp) {
 // success
 createDropDown(body.record); // dropdown作成処理
}, function(error) {
 // error
 console.log(error);
});

カキ氷さん

 

丁寧な返信まことにありがとうございます。

参考にしながら自分のJSをいじってみたところ、無事、目的を達成することができました。

ありがとうございました。