CookBook

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

投稿日:2022-06-01 更新日:

この 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 を制御しています。

なお、本記事の内容をベースに、以下の開発動画を公開しています。
記事と合わせてご確認ください。

【intra-mart】複数のプルダウンを連携させる【ローコード開発】

-CookBook
-

執筆者:


comment

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

関連記事

IM-BloomMaker 時刻入力のisErrorプロパティを利用して最大値・最小値を分かりやすくする方法

このCookBookでは、2022 Winter でリリースした「時刻入力」エレメントの「isError」プロパティの利用方法について説明します。「時刻入力」エレメントのmaxプロパティでは最大値(最 …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(単一アイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

no image

ライブラリのバージョン監視に応用可能なロジックフローの作り方

このCookBookでは、IM-LogicDesignerを利用して、指定したURLのHTMLから正規表現を利用して任意の文字列を取得する方法を紹介します。 JavaScript定義とREST定義を作 …

面グラフの作り方とスプレッドシートとのデータ連携のやり方

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で面グラフを作成する方法と、グラフエレメントとスプレッドシートのデータ連携のやり方について紹介しています。 IM-B …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …