カテゴリー内の他の記事

kintone UI Componentを使って動的ドロップダウンを作成しよう!

フォローする

(著者:Cstap 江田 篤史

はじめに

kintone UI Componentは、kintoneライクなUIを簡単に作成できるライブラリでフォーム部品を自作する場合などには非常に便利です。

今回は選択肢を動的に変更するドロップダウンを作成してみました。

サンプル

アンケートなどで47都道府県から自身が該当する都道府県を直接選ぶのは大変ですよね!

選択した「地方」に合わせて、「都道府県」の選択肢を変更するカスタマイズを紹介します。

デモ

demo1.gif

フォーム設定

フィールド名 フィールドタイプ フィールドコード(or 要素ID)
地方 ドロップダウン 地方
都道府県 文字列 (1行) 都道府県
- スペース space

コード

sample.jsとして下記のプログラムをアプリに適用します。
※お試しの場合は、kintone-ui-component.min.js と kintone-ui-component.min.css が必要です。

解説

kintone UI Component を用いた、動的ドロップダウン作成の流れを解説します。

  1. ラベルとドロップダウンを作成
  2. ドロップダウンの値をレコードとして保存
  3. 選択肢を可変にする

パートごとに利用したkintone UI Componentのメソッドを書き出しておくので、メソッドの詳しい解説はこちらなどを参考にしてください。
※ここでは「都道府県」の選択肢を関東地方の都県に絞って解説していきます。

1. ラベルとドロップダウンを作成

用意したスペースフィールド内に、ラベルとドロップダウンを作成します。

コード 

利用したkintone UI Componentのメソッド

  • Label() : ラベルの作成
  • Dropdown() : ドロップダウンの作成
  • 〇〇.render():DOM要素の取得
    • 例) label.render()、dropdown.render()

デモ

demo2.gif

2. ドロップダウンの値をレコードとして保存

先ほど作成したドロップダウンの値を「文字列 (1行)」フィールドにコピーすることでレコードとして保存します。

コード 

利用したkintone UI Componentのメソッド

  • Dropdown().on() : ドロップダウンのイベントリスナの追加

デモ

demo3.gif

3. 選択肢を可変にする

選択した「地方」に合わせて、「都道府県」の選択肢を動的に変更します。コード及びデモは冒頭のサンプルを参照してください。

利用したkintone UI Componentのメソッド

  • Dropdown().setValue() : ドロップダウンの値の設定
  • Dropdown().getItems() : ドロップダウンの選択肢の取得
  • Dropdown().removeItem() : ドロップダウンの選択肢の削除
  • Dropdown().addItem() : ドロップダウンの選択肢の追加

おわりに

kintone UI Componentを使用すると、DOM等の知識がなくても容易にkintoneライクなフォーム部品を作成できるようになります。
いろいろとカスタマイズの幅が大幅に広がりますので、是非活用してみてください。

関連Tips

このTipsは、2018年8月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。