LoginSignup
1

More than 1 year has passed since last update.

【kintone】kintone UI Component v1で連携するドロップダウンを作る

Last updated at Posted at 2021-03-31

kintoneのドロップダウン、連携したいですよね?

というわけで今回は、kintone UI Component v1 で2つのドロップダウンを作成して連携させるカスタマイズです。1つ目のドロップダウン選択によって、2つ目のドロップダウンの選択肢を入れ替えます。

アプリの準備

スペースフィールドと文字列(1行)フィールドをフォームに配置します。

フィールド種類 フィールド名 フィールドコード
スペース -- spDropdown
文字列(1行) 兄弟ドロップダウンの選択 drText

2021-03-29_14h21_07.png

JavaScript

前回同様、
新規追加&編集画面表示のイベントでドロップダウンが動くようにします。

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

ドロップダウンを設置する

スペースフィールドの要素を取得し、
2つのドロップダウン兄弟を設置します。

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");


// ドロップダウン兄をつくる
const drAni = new Kuc.Dropdown({
  label: "ドロップダウン兄",
  requiredIcon: true,
  // items にはドロップダウンの中身を書く
  items: [
    { value: "メイン" },
    { value: "サイドメニュー" },
    { value: "ドリンク" },
  ],
  visible: true,
  disabled: false,
});

// スペースフィールドにドロップダウン兄を置く
spDropdown.appendChild(drAni);

// ドロップダウン弟をつくる(選択肢はからっぽ)
const drOtoto = new Kuc.Dropdown({
  label: "ドロップダウン弟",
  requiredIcon: true,
  // items は、からっぽにしておく
  items: [],
  visible: true,
  disabled: false,
});

// スペースフィールドにドロップダウン弟を置く
spDropdown.appendChild(drOtoto);

ドロップダウン兄の選択で弟に選択肢を与える

ドロップダウン兄で選択した結果によって
ドロップダウン弟に選択肢を与えるようにしてみましょう。

ドロップダウン兄でメインを選択したら、
ドロップダウン弟の選択肢はてりやきバーガー、チーズバーガー、BLTとなります。
サイドメニューを選んだ場合はドロップダウン弟の選択肢はポテト、ナゲット、サラダとなります。

ドロップダウン兄で選択した内容でswitch文を作り、
選択肢は、drOtoto(ドロップダウン弟)のプロパティに直接設定してみました。

// ドロップダウン兄を選択したときのイベント
drAni.addEventListener("change", () => {
  switch (drAni.value) {
    case "メイン":
      drOtoto.items = [
        { value: "てりやきバーガー" },
        { value: "チーズバーガー" },
        { value: "BLT" },
      ];
      break;
    case "サイドメニュー":
      drOtoto.items = [
        { value: "ポテト" },
        { value: "ナゲット" },
        { value: "サラダ" },
      ];
      break;
    default:
      drOtoto.items = [
        { value: "オレンジジュース" },
        { value: "コーヒー" },
        { value: "" },
      ];
  }
});

ドロップダウン弟を選択したら文字列(1行)フィールドに選択内容を表示する

ドロップダウン弟を選択した時のイベントも作成してみます。

文字列(1行)フィールドに選択したドロップダウンの値を表示します。
getとsetを使うのがポイントです。

// ドロップダウン弟を選択したときのイベント
drOtoto.addEventListener("change", () => {
  const r = kintone.app.record.get();
  // ドロップダウンで選択した値を文字列(1行)フィールド(フィールドコード:drText)にコピー
  r.record.drText.value = drAni.value + "" + drOtoto.value;
  kintone.app.record.set(r);
});

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

動作確認&まとめ

このように2つのドロップダウンが連携したでしょうか?

ab.gif

kintone UI Component v1 はkintoneぽいデザインで色々なコントロールを作成することができ、
コーディングも簡単になるのでぜひ挑戦してみてくださいね^^

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1