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

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

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

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

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

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

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

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

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

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

  • チェックボックスのRGにカスタムステートつける
  • チェックボックス1つもチェック入っていないときはConditionalでカスタムステートで全部表示する
  • チェックボックスにチェックしたタイミングとチェック外したタイミングでワークフロー設定する
  • チェックつけたときは、Set StateでチェックボックスのRGにplus item
  • チェック外したときは、Set StateでチェックボックスのRGにminus item

Element tree(構造)は以下で参ります。

Bubbleでチェックボックス絞り込み検索の実装手順

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

  1. チェックボックスの項目となるOption setsを作る
  2. 検索対象のData typeに、オプション入稿用のfieldを追加する
  3. チェックボックス群をRepeatingGroupで作る
  4. 検索対象データを表示するRepeatingGroupを作る
  5. チェックボックスにチェックしたタイミングとチェック外したタイミングでワークフロー設定する

チェックボックスの項目となるOption setsを作る

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

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

検索対象のData typeに、オプション入稿用のfieldを追加する

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

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

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

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

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

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

チェックボックス群をRepeatingGroupで作る

RepeatingGroupの設定
チェックボックスの設定

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

RepeatingGroupでやること

  • Custom stateをtextタイプでmultiple entriesにチェックをつけて作成
  • Type of contentに冒頭で作ったOption setsを設定
  • Data sourceにAll Option setsを設定(例ではAll Stylist Feature)

Checkboxエレメントでやること

  • LabelにCurrent cell's Option sets's Displayを設定(例ではStylist Feature’s Display)

検索対象データを表示するRepeatingGroupを作る

完成形

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

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

RepeatingGroupのAppearance設定
RepeatingGroupのConditional設定

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内で複数オプションを表示するためにやること

  • find & replaceで、元データの「カンマ+半角スペース」を「改行」に置換して表示されるようにする!

チェックボックスにチェックしたタイミングとチェック外したタイミングでワークフロー設定する

Checkboxエレメントに2つワークフローを設定して完成です。上記動画を参考にチェックボックスのワークフロー開いてください。

チェックつけたときは、Set StateでチェックボックスのRGにplus item

Only when設定する
Step1でSet stateする

チェック外したときは、Set StateでチェックボックスのRGにminus item

完成です!お疲れ様でした!

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次