CookBook

IM-BloomMaker 複数のプルダウンを連携させる方法

投稿日:

この CookBook では、IM-BloomMaker を使用して、複数のプルダウンを連携させる方法を紹介します。
例として都道府県を選択後に、その中に含まれる市区町村がプルダウンから選べるようにします。

完成イメージ

サンプル

以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2021 Winter 版以降でインポートできます。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
あらかじめ、IM-BloomMaker のルーティング定義で、認可を設定してください。
http://localhost:8080/imart/im_cookbook/209264
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. プルダウンを配置する
  2. アクションを設定する
  3. 動作確認

プルダウンを配置する

最初に「フォーム部品(Bulma)」-「水平フィールド」を配置し、 「フォーム 部品 (Bulma)」-「プルダウン」を 「水平フィールド」に配置します。

同様にもう1セット配置します。

「水平フィールドラベル」を PrefecturesCity に変更します。

次に、変数を用意します。

変数の JSON エディタに以下の定義を貼り付けて保存します。
cityLabels、cityValues、prefectureLabels 、prefectureValues がマップ型になっている場合は、文字列型に変更してください。

続いてタブを定数に切り替え、定数の JSON エディタに以下の定義を貼り付けて保存します。

それぞれの変数と定数の役割は以下で。

変数

  • $variable.data.cityLabels
  • $variable.data.cityValues
    • 市区町村のプルダウン labels と values
  • $variable.data.prefectureLabels
  • $variable.data.prefectureValues
    • 都道府県のプルダウンの labels と values
  • selectedArea
    • 都道府県のプルダウンの value
  • $variable.data.cityList
    • 都道府県選択後のアクションで検索した市区町村のリスト

定数

  • $constant.data.prefectuList
    • 都道府県のリスト
  • $constant.citySearch
    • 市区町村を検索する API

次にエレメントのプロパティに変数を設定します。
Prefectures のプルダウンのプロパティを以下のように設定します。

続けて City のプルダウンのプロパティを以下のように設定します。

アクションを設定する

初期表示時と都道府県を選択した時のアクションを作成します。

初期表示時のアクション

アクションタブからアクションを新規作成し、「カスタムスクリプトを実行する」を配置します。
アクション名を initial にし、カスタムスクリプトを以下のようにします。

都道府県を選択した時のアクション

続いて都道府県を選択した時のアクションを作成します。
アクションタブからアクションを新規作成し、名前を select area にします。
「URL〇にリクエストを送信する」を配置し、以下のように設定します。

URL〇にリクエストを送信する$constant.citySearch
リクエストパラメータ="area=" + $variable.selectedArea
レスポンスデータ$variable.data.cityList

「URL〇にリクエストを送信する 」に設定した URL は国土交通省で提供されている都道府県内市区町村一覧取得APIを利用しています。
https://www.land.mlit.go.jp/webland/api.html#todofukenlist
リクエストパラメータに Prefectures のプルダウンで選択した value が設定されます。

次に「カスタムスクリプトを実行する」を 「URL〇にリクエストを送信する」 の下に配置します。
カスタムスクリプトは以下のように設定します。

最後に作成したアクションを設定します。

コンテナを選択してページ読み込み時のアクションに initial を設定します。

Prefectures のプルダウンの入力変更時のイベントに select area を設定します。

デザイナを保存します。
以上で設定は完了です。

動作確認

プレビューを開き、動作確認を行います。
以下の動作を確認できます。

  • 都道府県を選択して、市区町村のプルダウンが選択できること

補足

サンプルでは Prefectures のプルダウンを選択していない場合は、City のプルダウンを選択できないようにプルダウンの disabled を制御しています。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

IM-Notice Broker の設定方法

この CookBook では、分散環境での IM-Notice (デスクトップ版)の設定方法について紹介しています。 分散環境の構成として、以下のような 2 台構を考えます。 マシン IPアドレス A …

no image

ワークスペースカレンダーアイテムでスケジュール機能と連携したスケジュールを登録する方法

このCookBookでは、intra-mart Accel Collaboration ワークスペースのワークスペースカレンダーについて紹介しています。 intra-mart Accel Collab …

IM-BloomMaker リッチテーブルのデータ部分を横スクロールさせる方法

このCookBookでは、リッチテーブルのデータ部分を横スクロールさせる方法について紹介しています。Accel Platform 2021 Summer より前のバージョンでは、リッチテーブルの横スク …

no image

IMBox の「Like!」を別のキャプションにする方法

この Cookbook では、IMBox の「Like!」を別のキャプションにする方法を紹介します。 具体的には、「Like!」を「確認」に変更する方法を紹介します。 この Cookbook では、日 …

no image

変数のkey, valueを取り出して配列にするアクション、式表現の利用方法

このCookBookでは、2022 Spring で新しく追加された以下のアクションと式表現について紹介します。 アクション変数○に○の各キー名を配列にして代入する変数○に○の各要素の値を配列にして代 …