kintoneで大中小カテゴリーなど親子関係にあるプルダウンを実現するためのjavascript(マスタは他のアプリ)

README.md

こちらのドロップダウンリストのサンプルを元にちょっと手を加えてみた https://gist.github.com/fddcddhdd/95cf9a4d5090cf886055

マスタ側アプリ

フィールド名	フィールドタイプ	フィールドコード	備考
有効無効	チェックボックス	有効フラグ	ON
大カテゴリ	文字列	maser_category_large
中カテゴリ	文字列	maser_category_middle
小カテゴリ	文字列	maser_category_small
優先順位	数値	優先度	必須項目 重複を禁止

参照側アプリ

フィールド名	フィールドタイプ	フィールドコード	備考
大	文字列	category_large
中	文字列	category_middle
小	文字列	category_small
-	スペース	my_space_field

• 参照側アプリのフィールドはドロップダウンの選択結果を保存するためのもの（コード実行時に非表示となる）
• 値を保存する際に jQuery を利用しているのでライブラリに含めておくこと

gistfile1.js

jQuery.noConflict();
(function($) {
  'use strict';

  // カテゴリマスタ側アプリにおけるフィールドコード
  const MASTER_LARGE_CATEGORY_NAME = "master_category_large";
  const MASTER_MIDDLE_CATEGORY_NAME = "master_category_middle";
  const MASTER_SMALL_CATEGORY_NAME = "master_category_small";
  
  // 参照側アプリにおけるフィールドコード
  const LARGE_CATEGORY_NAME = "category_large";
  const MIDDLE_CATEGORY_NAME = "category_middle";
  const SMALL_CATEGORY_NAME = "category_small";

  // クラス定義
  let KintoneRecordManager = (function() {
  
    const MASTER_CATEGORY_APP_NO = 36;
    const MASTER_CATEGORY_QUERY = "有効フラグ in (\"ON\")";
  
    KintoneRecordManager.prototype.query = "";
    KintoneRecordManager.prototype.records = [];
    KintoneRecordManager.prototype.appId = null;
    KintoneRecordManager.prototype.query = MASTER_CATEGORY_QUERY;
    KintoneRecordManager.prototype.limit = 100;
    KintoneRecordManager.prototype.offset = 0;
  
    function KintoneRecordManager() {
      this.appId = MASTER_CATEGORY_APP_NO;
    }

    KintoneRecordManager.prototype.getRecords = function(callback) {
      kintone.api("/k/v1/records", "GET", {
        app: this.appId,
        query: this.query + (" order by 優先度 asc limit " + this.limit + " offset " + this.offset )
      }, (function(_this) {
        return function(res) {
          let len = 0;
          Array.prototype.push.apply(_this.records, res.records);
          len = res.records.length;
          _this.offset += len;
          if (len < _this.limit) {
            _this.ready = true;
          if (callback !== null) {
              callback(_this.records);
            }
          } else {
            _this.getRecords(callback);
          }
        };
      
      })(this));
    };
  
    return KintoneRecordManager;
  })();


  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
    
    kintone.app.record.setFieldShown(LARGE_CATEGORY_NAME, false);
    kintone.app.record.setFieldShown(MIDDLE_CATEGORY_NAME, false);
    kintone.app.record.setFieldShown(SMALL_CATEGORY_NAME, false);
    
    let large_cat_selected = event.record[LARGE_CATEGORY_NAME].value;
    let middle_cat_selected = event.record[MIDDLE_CATEGORY_NAME].value;
    let small_cat_selected = event.record[SMALL_CATEGORY_NAME].value;
    
    let mySpaceField = kintone.app.record.getSpaceElement("my_space_field");
    
    let hashItems = [];
    
    let kintoneRecordManager = new KintoneRecordManager();
    kintoneRecordManager.records = [];
    kintoneRecordManager.offset = 0;
    
    kintoneRecordManager.getRecords(function(records) {
      
      if (records.length === 0) {
        mySpaceField.innerHTML = "マスタにレコードがありません";
        return;
      }
      
      for (let i = 0; i < records.length; i++) {
        let record = records[i];
        hashItems[i] = {
          large_cat: record[MASTER_LARGE_CATEGORY_NAME].value,
          middle_cat: record[MASTER_MIDDLE_CATEGORY_NAME].value,
          small_cat: record[MASTER_SMALL_CATEGORY_NAME].value,
        };
      }

      if (large_cat_selected === undefined) { large_cat_selected = hashItems[0].large_cat; }
      if (middle_cat_selected === undefined) { middle_cat_selected = hashItems[0].middle_cat; }
      if (small_cat_selected === undefined) { small_cat_selected = hashItems[0].small_cat; }
      
      for (let i = mySpaceField.childNodes.length-1; i >= 0; i--) {
        mySpaceField.removeChild(mySpaceField.childNodes[i]);
      }
      
      let select1 = document.createElement("select"); select1.name = "large_cat";
      let select2 = document.createElement("select"); select2.name = "middle_cat";
      let select3 = document.createElement("select"); select3.name = "small_cat";
      
      let arrCategory = new Array(
        {"pulldown": select1, "selected": large_cat_selected,  "parent": "",           "self": "large_cat"},
        {"pulldown": select2, "selected": middle_cat_selected, "parent": "large_cat",  "self": "middle_cat"},
        {"pulldown": select3, "selected": small_cat_selected,  "parent": "middle_cat", "self": "small_cat"}
      );

      for (let iCat = 0; iCat < arrCategory.length; iCat++) {
        let first_value = "";
        for (let i in hashItems) {
          
          if (arrCategory[iCat]["parent"] === "" || arrCategory[iCat - 1]["selected"] === hashItems[i][arrCategory[iCat]["parent"]]) {
            
            if (first_value !== hashItems[i][arrCategory[iCat]["self"]]) {
              let option = document.createElement("option");
              option.setAttribute("value", hashItems[i][arrCategory[iCat]["self"]]);
              
              if (arrCategory[iCat]["selected"] === hashItems[i][arrCategory[iCat]["self"]]) {
                option.setAttribute("selected", true);
              }
              option.innerHTML = hashItems[i][arrCategory[iCat]["self"]];
              arrCategory[iCat]["pulldown"].appendChild(option);
              first_value = hashItems[i][arrCategory[iCat]["self"]];
            }
          }
        }
      }

      // 大カテゴリ      
      select1.onchange = function(event) {
        let first_value_middle = "";
        let target_value_middle = "";
        
        for (let i = select2.childNodes.length-1; i >= 0; i--) {
          select2.removeChild(select2.childNodes[i]);
        }
        
        for (let i in hashItems) {
          
          if (this.value === hashItems[i]["large_cat"] && first_value_middle !== hashItems[i]["middle_cat"]) {
            let option2 = document.createElement("option");
            option2.setAttribute("value", hashItems[i]["middle_cat"]);
            option2.innerHTML = hashItems[i]["middle_cat"];
            
            select2.appendChild(option2);
            
            first_value_middle = hashItems[i]["middle_cat"];
            if (target_value_middle === "") {
              target_value_middle = first_value_middle;
            }
          }
        }
        
        // 中カテゴリ変更に対応
        let first_value_small = "";
        
        for (let j = select3.childNodes.length-1; j >= 0; j--) {
          select3.removeChild(select3.childNodes[j]);
        }
            
        for (let j in hashItems) {
              
          if (target_value_middle === hashItems[j]["middle_cat"] && first_value_small !== hashItems[j]["small_cat"]) {
            let option3 = document.createElement("option");
            option3.setAttribute("value", hashItems[j]["small_cat"]);
            option3.innerHTML = hashItems[j]["small_cat"];
            
            select3.appendChild(option3);
            
            first_value_small = hashItems[j]["small_cat"];
          }
        }
        
      };
      
      // 中カテゴリ
      select2.onchange = function(event) {
        let first_value_small = "";
        
        for (let i = select3.childNodes.length-1; i >= 0; i--) {
          select3.removeChild(select3.childNodes[i]);
        }
        
        for (let i in hashItems) {
          if (this.value === hashItems[i]["middle_cat"] && first_value_small !== hashItems[i]["small_cat"]) {
              let option3 = document.createElement("option");
              option3.setAttribute("value", hashItems[i]["small_cat"]);
              option3.innerHTML = hashItems[i]["small_cat"];
            
              select3.appendChild(option3);
            
              first_value_small = hashItems[i]["small_cat"];
          }
        }
      };
      
      // 小カテゴリ
      // なにもしない
      
      mySpaceField.appendChild(select1);
      mySpaceField.appendChild(select2);
      mySpaceField.appendChild(select3);

      // CSS
      let arrOutput = new Array(
        {"pulldown": select1, "fieldname": LARGE_CATEGORY_NAME},
        {"pulldown": select2, "fieldname": MIDDLE_CATEGORY_NAME},
        {"pulldown": select3, "fieldname": SMALL_CATEGORY_NAME}
      );
      
      for (let iOutput = 0; iOutput < arrOutput.length; iOutput++) {
        let div_outer = document.createElement("div");
        div_outer.className = "control-gaia control-single-select-field-gaia";
        
        let span = document.createElement("span");
        span.innerHTML = arrOutput[iOutput]["fieldname"];
        span.className = "control-label-text-gaia";
        
        let div = document.createElement("div");
        div.className = "control-label-gaia";
        div.appendChild(span);
        div_outer.appendChild(div);
        
        arrOutput[iOutput]["pulldown"].style.width = "230px";
        arrOutput[iOutput]["pulldown"].style.cursor = "pointer";
        
        div_outer.appendChild(arrOutput[iOutput]["pulldown"]);
        mySpaceField.appendChild(div_outer);
      }
      
    });
  
    return event;
  });

  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
    
    event.record[LARGE_CATEGORY_NAME].value = $("select[name='large_cat']").val();
    event.record[MIDDLE_CATEGORY_NAME].value = $("select[name='middle_cat']").val();
    event.record[SMALL_CATEGORY_NAME].value = $("select[name='small_cat']").val();

    return event;    
  });
  
})(jQuery);