BubbleでOption setsに親子関係を持たせたドロップダウンで絞り込む検索機能の実装方法
ノーコードツール「Bubble」でOption setsに親子関係を持たせ、それを使ったドロップダウンで絞り込む検索機能の実装方法を紹介します。
こんな人におすすめです
- ２つのOption setsに親子関係を持たせる方法を知りたい人
- ドロップダウンで親カテゴリーの値に応じて、子カテゴリーのドロップダウンの選択肢をセットする方法が分からない人
- ２つのOption setsでRepeating Groupを絞り込みたい人
動画解説バージョンはこちら！
ノーコード開発お役立ち資料3点セット
計100ページ近い大ボリュームでノーコード開発について解説
- ノーコード開発会社の選び方
- EPICsのノーコード受託開発の特徴
- 支援実績・事例集
実装イメージ
初期状態では全データを表示させて、親カテゴリーのドロップダウンが選択されたときに、その親カテゴリーに紐づく子カテゴリーを子カテゴリードロップダウンにセットし、RepeatingGroupのデータもそれに応じて絞り込みます。
子カテゴリーのドロップダウンが選択されたときも同様にさらに絞り込みを行います。
実装イメージの構造（Element tree）は以下の通りです。
実装手順
Bubbleで、親子関係Option sets × RepeatingGroupは以下の手順で実装します。
- 子カテゴリーのOption setsを作成する
- 親カテゴリーのOption setsを作成する
- 親カテゴリーの各Optionsに子カテゴリーを紐付ける
- UserタイプにOption sets２つを格納するフィールドを追加する
- ドロップダウンを２つ設置する
- RepeatingGroupを２つのOption setsで絞り込む
まずはOption setsを２つ作成していきます！
子カテゴリーのOption setsを作成する
親カテゴリーのOption setsと紐付ける必要があるので、子カテゴリーのOption setsから先に作成します。
例ではオプションセットの名前を「child_category」にして、子カテゴリー1から6までのOptionsを用意しました。
親カテゴリーのOption setsを作成する
次に親カテゴリーのOption setsを作成します。
設定ポイントは、「Create a new attribute」から子カテゴリーを紐付けるためのchildを追加することです！
Attribute typeには先程作成した子カテゴリーのOption sets「child_category」を指定してあげましょう。
親カテゴリーの各Optionsに子カテゴリーを紐付ける
親カテゴリーに子カテゴリーを紐付ける準備が整ったので、親カテゴリーの各Optionsに任意の子カテゴリーを紐付けましょう。
地道な作業です。各Optionsの「Modify attributes」をクリックすると子カテゴリーOption setsを追加するためのドロップダウンが表示されるので設定してください。
UserタイプにOption sets２つを格納するフィールドを追加する
次はUserタイプにOption sets２つを格納するフィールドを追加しましょう。
Field typeは各Option setsを選択してください。
ドロップダウンを２つ設置する
Option setsの値をセットするドロップダウンをDropdownエレメントで画面に設置します。
設定ポイントは、子カテゴリーのドロップダウンのChoices sourceを「Dropdown 親カテゴリー’ value’s child」とすることです！
その他の設定項目について一般的なものなので今回の記事では割愛させていただきますm(_ _)m
RepeatingGroupを２つのOption setsで絞り込む
仕上げです。
RepeatingGroupの絞り込み条件（Constraint）を以下２つのドロップダウンの値で設定してあげましょう。
- parent_category =
Dropdown 親カテゴリー's value - child_category =
Dropdown 子カテゴリー's value
※parent_categoryとchild_categoryはそれぞれUserタイプに設定したフィールドです。
もう１点重要なのは、「Ignore empty constraints」にチェックを入れること。ここにチェックが入っていないと、初期状態（ドロップダウンが未選択）のときにRepeatingGroupのデータが何も表示されなくなってしまいますので注意です！
