ノーコードツール「Bubble」のドロップダウンリストに親子関係を設定する方法

はじめに

先日ノーコードツールの「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: VegetableOptions:　にんじん　たまねぎ　じゃがいも

Option set name: FruitOptions:　りんご　みかん　なし

Designでページの作成

UI Builderで「Dropdown」を選択し、それぞれの要素を作成します。

各要素の設定

Dropdown 親カテゴリの要素を以下で設定します。

Choices style：Dynamic choicesType of choices：CategoryChoices source：All CategoryOption caption：Current option’s Display

Dropdown 子カテゴリのiマークから「Custom states」を追加します。（例：child category）

State type：text

This state is a listにチェックを入れてください。

Dropdown子カテゴリの要素を以下で設定します。

Choices style：Dynamic choicesType of choices：textChoices source：Dropdown 子カテゴリ’s child categoryOption 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：VegetableOption：All options「Get an option」設定後は:each item’s Displayを選択

このWorkflowを親カテゴリの選択肢の数だけ作成します。

今回の例だと「野菜」の場合と「果物」の場合の2つを作成します。

これで親カテゴリを選択すると子カテゴリの内容が切り替わるようになりました。
親カテゴリで野菜を選べば子カテゴリのドロップダウンには、にんじん、たまねぎ、じゃがいもが、果物ならりんご、みかん、なしが表示されるはずです。

さいごに

今回は以上です。
Bubbleの記事は少なく、情報も古かったりするのでDropdownで躓いた人の助けになれば幸いです。