はじめに
先日ノーコードツールの「Bubble」を利用する機会があったのですが、Web上にもあまり情報が落ちてなかったりするので、使用していて分かったことを私なりにまとめてみました。
今回はドロップダウンリストに親子関係を持たせる設定の話になります。
設定目標
2つのドロップダウンリストを連携させ、1つ目を選択したら2つ目のドロップダウンリストには1つ目と関係する選択肢しか表示しないように設定する
この記事では、具体的な例として、1つ目のドロップダウンリストで「野菜」か「果物」をカテゴリとして選択できるように設定し、２つ目のリストでは最初に選んだカテゴリに応じて具体的な品目が表示されるように設定します。
※2023年10月時点の方法です。
手順
DataでOption setsを作成
「New option set 」で親となるリストを作成します。
Option set name: Category
Options：
野菜
果物をそれぞれ入力。
「New option set」で、今度は子となるリストを親カテゴリの選択肢の数だけ作成します。
野菜と果物に対応させるため、VegetableとFruit の2つを作成。
Optionsには具体的な品目を入力します。
この例では3品目ずつ入れてみました。
Option set name: Vegetable
Options:
にんじん
たまねぎ
じゃがいもOption set name: Fruit
Options:
りんご
みかん
なし
Designでページの作成
UI Builderで「Dropdown」を選択し、それぞれの要素を作成します。
各要素の設定
Dropdown 親カテゴリの要素を以下で設定します。
Choices style：Dynamic choices
Type of choices：Category
Choices source：All Category
Option caption：Current option’s Display
Dropdown 子カテゴリのiマークから「Custom states」を追加します。（例：child category）
State type：textThis state is a listにチェックを入れてください。
Dropdown子カテゴリの要素を以下で設定します。
Choices style：Dynamic choices
Type of choices：text
Choices source：Dropdown 子カテゴリ’s child category
Option caption：Current option:capitalized words
Workflowの設定
親カテゴリのDropdown要素を右クリックして「Start/Edit workflow」を選択します。
Only when に野菜の時だけ実行するように「This Dropdown’s value is 野菜」を設定します。
actionに「Set state of an element」を選択し以下で設定します。
Element：Dropdown子カテゴリ
Custom state：child category（「Custom states」に追加したもの）
Valueでは「Get an option」を選択し、以下を設定します。
Option set：Vegetable
Option：All options
「Get an option」設定後は:each item’s Displayを選択
このWorkflowを親カテゴリの選択肢の数だけ作成します。
今回の例だと「野菜」の場合と「果物」の場合の2つを作成します。
これで親カテゴリを選択すると子カテゴリの内容が切り替わるようになりました。
親カテゴリで野菜を選べば子カテゴリのドロップダウンには、にんじん、たまねぎ、じゃがいもが、果物ならりんご、みかん、なしが表示されるはずです。
さいごに
今回は以上です。
Bubbleの記事は少なく、情報も古かったりするのでDropdownで躓いた人の助けになれば幸いです。
