(Bubble)2つのドロップダウンメニューに親子関係をもたせる

概要

2つのドロップダウンメニューに親子関係を持たせ、親カテゴリを変更したら、子カテゴリを変更したい場合、Bubbleでどう実装するか解説します。
親と子の2階層、親子関係はWorkflow上で手動で設定します。
他のやり方がありましたらコメントください!

画像6

使用する機能

Option sets と Custom state を使って実現します。
Option setsとは静的なデータ(テキスト、List、画像など)を保存しておける仕組みで、データベースよりも高速に処理できます。
公式サイトもご覧ください。

例として、カテゴリを選ぶと、そのカテゴリ配下の会社名を表示するようにします。

画像1

(1)Dataの「Option sets」に選択肢を入れておく

「Data」画面から「Option sets」タブを選択し、カテゴリとその配下の会社名を登録します。
まずはカテゴリを登録します。New option setに「Category」を入力してCreate、その中にOptionsとして「Smartphone」「Car」「PC」の3つのカテゴリを登録します。

画像2

続いて配下の会社名を登録します。
同様にNew option setに「Campany-PC」を入力してCreate、その中にOptionsとして「NEC」「Acer」「HP」の3つの会社名を登録します。同じく「Company-Smartphone」「Company-Car」も登録します。

(2)親カテゴリのDropdownを設置

画面に親カテゴリのDropdownを配置し、Choices styleに「Dynamic choices」、Type of choicesに「Category」を選択し、Choices sourceとOption Captionを指定します。

画像3

(3)子カテゴリのDropdownを設置しCustom state(例:Choices)を追加

画面に子カテゴリ(会社名)のDropdownを配置し、(i)マークからCustom states(例:Choices)を追加します。この時に「List」にチェックを入れてください。

画像4

(4)子カテゴリのDropdownのChoices sourceを、上記のCustom stateにする

子カテゴリ(会社名)のDropdownに、Choices styleに「Dynamic choices」、Type of choicesに「text」を選択し、Choices sourceとOption Captionを指定します。

(5)親カテゴリのDropdownの変更のタイミングで、上記のCustom stateを変更
(親カテゴリの選択肢の数だけWorkflowを作成)

親カテゴリのDropdownを右クリックして「Start/Edit workflow」を選択してWorkflowを編集します。
まず値が「Smartphone」に変更された場合、子カテゴリ(会社名)のCustom stateをOption setsの「Campany-PC」になるように設定します。

画像5

同様に、「Car」「PC」に変更された場合のWorkflowも設定します。

以上で完成です!
Workflowを複数(親カテゴリの選択肢の数だけ)作成しなければならないですが、子カテゴリ(会社名)の変更時はOption setsを変えるだけですみます。

参考サイト

How to Use Option Sets | Bubble
じゃんけんゲームをBubbleで作ってみる!(入門者向け) – ノーコード ラボ
・Nocode bubbleでドロップダウンのデータを保存する方法|matsutsune|note

コメントを残す

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