【kintoneアプリ開発】ドロップダウンメニューの項目を動的に変えてみる！

kintoneアプリの作成に慣れてくると、少しずつ細かい仕様の制約が気になってきますよね。。。個人的にはこのドロップダウンメニュー、初期設定で項目を決めておかないといけないというのが使い勝手が悪い。。。

そこで調べてみると、kintone UI Componentというライブラリを使うことで動的なドロップダウンメニューが作れるとのこと！！

実装してみたので、この記事ではその方法をまとめたいと思います！

この記事はこんな方にオススメ！

・kintoneアプリをカスタムしていきたい

・プログラミングは初心者

・ドロップダウンメニューに不満がある

この記事で作るkintoneアプリはこれ

アプリストアに用意されている「案件管理」アプリをカスタムして、製品名のドロップダウンメニューの項目を「商品マスタ」アプリを参照して可変になるように実装していきましょう。

なお、「案件管理」アプリは、上部メニューの「アプリを追加」から「案件管理」と検索すると作成できます。

1.  「商品マスタ」アプリを作成する

まず、ドロップダウンの項目を管理する「商品マスタ」アプリを作成していきます。この作業はkintoneを使っている人であればすぐでしょう。

「アプリを追加」から「はじめから作成する」を選択します。設置するフィールドは最低限「商品名」があれば良いでしょう。

ここに、ドロップダウンメニューに追加したい商品をレコードとして登録していきます。取り敢えず、kintone・Office・Garoon・メールワイズを追加してみました（※単価は適当です）

このレコードを参照したドロップダウンメニューを案件管理アプリに実装していきましょう！

2. 案件管理アプリにドロップダウンメニューを実装する

早速ですが、完成版のソースコードを貼っておきます。少しずつ解説していきましょう。

(function() {
 'use strict';

 kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
   var record = event.record;

   /****************/
   /* 商品情報の取得 */
   /****************/
   var body = {
     "app": 119, //商品マスタのアプリID
     "fields": ["item_no", "item", "price"] //フィールドコード
   };

   kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
     /* Success */
     console.log(resp);
     var records = resp.records;

     /****************/
     /* メニューの設置 */
     /****************/
     var items = [];
     records.forEach(function( value, index ){
       var item = {'label': value.item.value, 'value': value.item.value};
       items.push(item);
     });

     var label = new kintoneUIComponent.Label({text: '製品名'});
     var dropdown = new kintoneUIComponent.Dropdown({items: items});
     kintone.app.record.getSpaceElement('menu_space').appendChild(label.render());
     kintone.app.record.getSpaceElement('menu_space').appendChild(dropdown.render());

     /**************/
     /* イベント処理 */
     /**************/
     dropdown.on('change', function(value) {
       var record = kintone.app.record.get();
       console.log(record.record);
       console.log("value", value);

       for(var i=0; i<records.length; i++){
         if(value == records[i].item.value){
           record['record']['単価']['value'] = records[i].price.value;
         }
       }
       kintone.app.record.set(record);
     });

   }, function(error) {
     // error
     console.log(error);
   });
 });
})();

商品情報の取得

別アプリの情報を取得する場合は、kintone REST APIを使います。body にアプリIDと取得したいフィールドコードを入れてあげれば、簡単に情報を取得することができます。

   var body = {
     "app": 119, //商品マスタのアプリID
     "fields": ["item_no", "item", "price"] //フィールドコード
   };

   kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
     /* Success */
     console.log(resp);
     var records = resp.records;

   }, function(error) {
     /* error */
     console.log(error);
   });

ドロップダウンメニューの設置

取得した商品名（フィールドコード：item）をドロップダウンメニューの項目として追加しています。なお、ドロップダウンメニューの設置場所として案件管理アプリにスペース（フィールドコード：menu_space）を設置しています。

     var items = [];
     records.forEach(function( value, index ){
       var item = {'label': value.item.value, 'value': value.item.value};
       items.push(item);
     });

     var label = new kintoneUIComponent.Label({text: '製品名'});
     var dropdown = new kintoneUIComponent.Dropdown({items: items});
     kintone.app.record.getSpaceElement('menu_space').appendChild(label.render());
     kintone.app.record.getSpaceElement('menu_space').appendChild(dropdown.render());

イベント処理

ドロップダウンメニューの項目が選択された際のイベント処理も追記しています。今回は選択されたメニューの単価が切り替わるようにしています。

     dropdown.on('change', function(value) {
       var record = kintone.app.record.get();
       console.log(record.record);
       console.log("value", value);

       for(var i=0; i<records.length; i++){
         if(value == records[i].item.value){
           record['record']['単価']['value'] = records[i].price.value;
         }
       }
       kintone.app.record.set(record);
     });

3. JavaScriptファイルの設置

作成したjsファイルに加えて、kintone-ui-component.min.js と kintone-ui-component.min.cssも設置してください。ファイルはこちらよりダウンロードできます。

4. 動作確認

では、レコードの編集画面を開いてみましょう。

ドロップダウンメニューが追加されましたね！これで、商品マスタの方に商品情報を追加するだけで、このドロップダウンメニューにも項目が追加されるようになります。

可変的なドロップダウンメニューを設置して、kintoneアプリをより使いやすいものにカスタムしていきましょう！