【kintone】標準機能のドロップダウンとkintone UI Component v1のドロップダウンを連携させる

今回はkintoneの標準機能のドロップダウンと、kintone UI Component v1 のドロップダウンを連携させるサンプルです。

kintone UI Component v1 のドキュメントはこちら

アプリの準備

ドロップダウン、スペース、文字列(1行)フィールドをフォームに配置します。

フィールド種類	フィールド名	フィールドコード	備考
ドロップダウン	会社	会社	選択肢は、任天堂、スクエニ、コナミ　など
スペース	--	spDropdown
文字列(1行)	好きなゲーム	好きなゲーム

kintone UI Component v1 の準備

JavaScript / CSSでカスタマイズ に
kintone UI Component v1 のCDNを追加しておきます。

CDN : https://unpkg.com/kintone-ui-component/umd/kuc.min.js

JavaScript

新規追加＆編集画面でドロップダウンが動くようにします。

kintone.events.on(
  ["app.record.create.show", "app.record.edit.show"],
  (event) => {
    // コードを書くところ

  }
);

スペースフィールドにドロップダウンを設置

kintone UI Component v1 でドロップダウンを設置します。
itemsを空っぽにしておくことと、idを設定しておくのがポイントです。
また、ドロップダウン変更イベントで文字列(1行)フィールドに選択した値を表示するようにしておきます。
（addEventListenerで書けます～）

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");
// ドロップダウンをつくる
const drGame = new Kuc.Dropdown({
  label: "ゲーム",
  requiredIcon: true,
  // items はからっぽにしておく
  items: [],
  // changeイベントで拾えるようにidを設定しておく
  id: "drGame",
  visible: true,
  disabled: false,
});
// スペースフィールドにドロップダウンを置く
spDropdown.appendChild(drGame);

// ドロップダウンを選択したときのイベント
drGame.addEventListener("change", () => {
  const r = kintone.app.record.get();
  // ドロップダウンで選択した値を文字列(1行)フィールド（フィールドコード：好きなゲーム）にコピー
  r.record.好きなゲーム.value = r.record.会社.value + "：" + drGame.value;
  kintone.app.record.set(r);
});

標準機能のドロップダウンのフィールド値変更のプログラム

標準機能のドロップダウンの値を変更したときはフィールド値変更イベントが発生します。
選択した値によってドロップダウンの中身を変更します。

// ドロップダウンを変更するイベント
kintone.events.on(
  ["app.record.create.change.会社", "app.record.edit.change.会社"],
  (event) => {
    // ゲームドロップダウンの要素取得
    const drGame = document.getElementById("drGame");

    // 選択した会社によって、ドロップダウンのitemsを変更する
    switch (event.changes.field.value) {
      case "任天堂":
        drGame.items = [
          { value: "マリオ" },
          { value: "ゼルダ" },
          { value: "ポケモン" },
        ];
        break;
      case "スクエニ":
        drGame.items = [
          { value: "ロマサガ" },
          { value: "FF" },
          { value: "ドラクエ" },
        ];
        break;
      default:
        drGame.items = [
          { value: "ゴエモン" },
          { value: "ポップンミュージック" },
          { value: "メタルギアソリッド" },
        ];
    }
  }
);

全体的なコードは以下です。

動作確認 ＆ まとめ

こんな感じに動きましたでしょうか？

標準機能のドロップダウンとkintone UI Component v1 で作るドロップダウンが連携しています。

他のアプリのレコードをドロップダウンの選択肢にすることもできます。
↓こちらもご参考にどうぞ

kintone UI Component v1 を活用すればいろんなアプリが作れそうです＾＾ぜひチャレンジしてみてくださいね！