BubbleでOption setsに親子関係を持たせたドロップダウンで絞り込む検索機能の実装方法

ノーコードツール「Bubble」でOption setsに親子関係を持たせ、それを使ったドロップダウンで絞り込む検索機能の実装方法を紹介します。

こんな人におすすめです

動画解説バージョンはこちら！

実装イメージ

初期状態では全データを表示させて、親カテゴリーのドロップダウンが選択されたときに、その親カテゴリーに紐づく子カテゴリーを子カテゴリードロップダウンにセットし、RepeatingGroupのデータもそれに応じて絞り込みます。

子カテゴリーのドロップダウンが選択されたときも同様にさらに絞り込みを行います。

実装イメージの構造（Element tree）は以下の通りです。

実装手順

Bubbleで、親子関係Option sets × RepeatingGroupは以下の手順で実装します。

まずは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とchild_categoryはそれぞれUserタイプに設定したフィールドです。

もう１点重要なのは、「Ignore empty constraints」にチェックを入れること。ここにチェックが入っていないと、初期状態（ドロップダウンが未選択）のときにRepeatingGroupのデータが何も表示されなくなってしまいますので注意です！