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

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

関連記事

IM-BloomMakerでテーブルに行追加・行削除を行う方法

このCookBookでは、 IM-BloomMaker でテーブルに行追加・行削除を行う方法をご紹介します。カスタムスクリプトを利用して配列の変数を操作することで、行追加・行削除を実現します。 完成イ …

no image

Payara 5.184 を Google Kubernetes Engine(GKE) から利用する

この CookBook では、Payara を GKE 上で実行しクラスタリングを構築する手順について紹介しています。 Payara 5.184 で Kubernetes Cluster Mode が …

no image

Payara 管理画面で行った設定を CUI で実施する方法

この CookBook では、Payara の Asadmin Recorder 機能について紹介しています。 Asadmin Recorder 機能についての詳細を知りたい方は Asadmin Re …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローの一括承認画面を作成する

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローの一括承認画面を作成する方法を紹介します。 完成イメージ ① 承認を実施するフローとノードを設定 …

IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方

このCookBookでは、「URL ○ にリクエストを送信する」アクションを使ってサンプル画面を作成する方法を紹介します。 2019 Summer では「URL ○ にアクセスする」でしたが、 201 …