カテゴリー内の他の記事

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

フォローする

(著者:江田 篤史

Index

はじめに

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

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

サンプル

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

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

デモ

demo-1.gif

フォーム設定

フィールド名 フィールドタイプ フィールドコード(or 要素ID)
地方 ドロップダウン

地方

・項目
 - 北海道地方
 - 東北地方
 - 関東地方
 - 中部地方
 - 近畿地方
 - 中国地方
 - 四国地方
 - 九州地方

都道府県 文字列 (1行) 都道府県
- スペース space

コード

sample.jsとして下記のプログラムをアプリに適用します。

※お試しの場合は、kintone-ui-component.min.js と kintone-ui-component.min.css が必要です。

  1. https://github.com/kintone/kintone-ui-component を開きます。
  2. [Clone or download]ボタンをクリックし、[Download ZIP]をクリックします。Zip ファイルがダウンロードされます。
  3. ダウンロードした Zip ファイルを解凍します。解凍後の「dist」フォルダー下の kintone-ui-component.min.js と kintone-ui-component.min.css を kintone アプリに適用してください
    (参照:JavaScriptやCSSでアプリをカスタマイズする)。
    なお、JavaScript ファイルは次の順番で適用してください。
    • kintone-ui-component.min.js
    • sample.js(カスタマイズ JavaScript ファイル)

この記事では、kintone UI Component v0.4.3 を使用しています。
kintone UI Component アップデートにより、デモと動きが異なる可能性があります。ご了承ください。

解説

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ライクなフォーム部品を作成できるようになります。
いろいろとカスタマイズの幅が大幅に広がりますので、是非活用してみてください。

変更履歴

  • 2019年11月25日
    kintone UI Component v0.4.3 に合わせてサンプルコードおよびデモのスクショを修正しました。
    • 「都道府県」の値が選択済みのときの場合でも、「地方」を変更するときに「都道府県」の値を初期化する
    • 「都道府県」が選択されていない状態で保存した場合、エラーを表示する

関連Tips

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

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

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

Avatar
Kintoneに挑戦中

この機能は レコード一覧画面では動作しないのでしょうか?

どうすればレコード一覧画面で利用できるようになるのでしょうか? 教示ください。

Avatar
cybozu Development team

Kintoneに挑戦中 様

このTipsは動的ドロップダウン作成のためにスペースフィールドを利用していますが、

レコード一覧画面ではスペースフィールドを利用できないため、この方法ではできません。

別の実装方法を考える必要があります。

本記事の方法とは異なりますので、恐れ入りますが、プログラミング時のご相談はcybozu developer コミュニティのご活用をお願いいたします。

Avatar
amainodaisuki

こちらの機能についてですが、「3. 選択肢を可変にする」が現在動作しません。

1. ラベルとドロップダウンを作成
2. ドロップダウンの値をレコードとして保存

は正常に動作することが確認できました。

何か原因があるのでしょうか?

Avatar
cybozu Development team

amainodaisuki 様

お世話になっております。
cybozu developer network 事務局です。

動作確認をしたところ、kintone UI Componentの最新バージョン「v0.4.3」で正常に動作しないことが確認できました。
バージョンアップに合わせて記事を修正しましたので、再度ご確認お願いできますでしょうか。

修正箇所は以下の通りです。
「コード」部分の23行目
【修正前】
dropdown.setValue();

【修正後】
 dropdown.setValue('') ;

Avatar
Tsutsumi Ayumi

こちらを試したところ、ReferenceError : kintoneUIComponent is not defined となってしまいます。

そのままのコードを用いても同じエラーが発生してしまいます。。

どうすれば解決するでしょうか?

 

 

 

Avatar
cybozu Development team

Tsutsumi Ayumi さま

サンプルコード以外に、kintone-ui-component.min.js と kintone-ui-component.min.css も適用されてますでしょうか。

まだの場合、

https://developer.cybozu.io/hc/ja/articles/360000511023

「kintone UI Componentのダウンロード」の記載部分をお読みになり適用をお願いします。

なお、kintone-ui-component.min.js はサンプルコードよりも上に適用ください。

cssファイルはjsファイルと同画面でも適用部分がわかれているため、ご注意ください。

記載に不足があり申し訳ありません。

Avatar
Tsutsumi Ayumi

ご担当者様

ありがとうございます。解決いたしました。

少しずつ勉強させていただきたいと思います。

 

Avatar
yamagata

ご担当者様

デモでは地方の値を変更すると都道府県の値が一旦空白になっているようですが、こちらのコードでは地方を変更しても都道府県は前の値のままのようです。確認していただけますでしょうか?

よろしくお願いいたします。

 

Avatar
cybozu Development team

yamagata 様

お世話になっております。cybozu developer network 運営局です。

kintone UI Component のバージョンアップで、ドロップダウンの動作が変わっておりました。
別の「地域」が選択されたときは「都道府県」が初期化されるように、ソースコードを修正いたしました(変更履歴

  • 31行目:初期化用の選択肢を追加、26行目:「地域」が変わったときに初期化されるようにセットする処理を追加
  • 66-75行目:「都道府県」で初期化用の選択肢を選んだ場合(空文字が入力された場合)は、エラーとする処理を追加

よろしくお願いいたします。

Avatar
yamagata

ご担当者様

対応していただきまして、ありがとうございました。

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