Bubbleで複数チェックボックスによる絞り込み検索を実装する方法

2024年1月24日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツール「Bubble」で複数チェックボックスの検索機能を実装する方法を紹介します。

チェックボックスは、Option setsのオプションをRepeatingGroupで表示します。データの絞り込み検索部分は、Custom stateなどを駆使して賢くスマートに実装します。

チェックボックスによる絞り込み機能はあらゆるアプリケーションで求められる可能性が高いものなのでぜひ記事の内容を試して「こんな感じで実装できるんだ！」と、頭の片隅に記憶してもらえたら幸いです！

無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

実装イメージ

今回は、架空の美容師検索アプリのイメージで実装イメージをご用意いたしました。

チェックボックスの「カット」〜「アウトドア派」はOption setsのオプションです。

実装方法はざっくり以下の感じ。

Element tree（構造）は以下で参ります。

以下の手順で実装します。

チェックボックスのRepeatingGroupのData sourceとなるOption setsを作成します。

例では美容師の特徴という意味で、Option sets「Stylist Feature」を追加しました。

絞り込み検索の対象となるData type（例ではUser）にオプションを複数入力する用のfieldをtext型で追加します。

例では美容師の特徴という意味でfeatureを追加しました。

次に、作成したテストデータのfeatureにオプションを複数入れていきます。

このとき、テキストは上記画像のように、「,」（カンマ）＋半角スペースで入れましょう。あとからfind&replaceで整形しますので。

正

カット, ヘアカラー, 経験年数1〜3年, アウトドア派

誤

カット,ヘアカラー,経験年数1〜3年,アウトドア派

複数チェックボックスを、RepeatingGroupとCheckboxエレメントを使って上記の設定で作ります。

RepeatingGroupでやること

Checkboxエレメントでやること

チェックボックスにチェックされた値に応じて絞り込まれるデータを表示するRepeatingGroupを作ります。

※細かいデザインの作り方は今回の主題ではないので割愛させていただきます。ご了承くださいませ。

RepeatingGroupでやること

Data sourceでSearch for 検索対象のData Typeを選択する
Searchの条件は、オプション入れるfield contains keyword(s) チェックボックスのRepeatingGroup's Custom stateをセットする
なにもチェックされていないときのConditionalを設定する。チェックボックスのRepeatingGroup's Custom state:count is 0

Data sourceは単純に制約なしで引っ張ってきます。

RG内で複数オプションを表示するためにやること