見出し画像

[bubble.io]RepeatingGroupとcheckboxを組み合わせて、複数選択可能なUIを実装する方法

withTone

withToneエンジニアの光井です。withToneのプロトタイプ開発をbubble.ioでやっています。

複数の選択肢から1つの項目を選ぶときは、Dropdownを使えば良いですが、複数選択可能な実装が必要な場合の方法が分からず、調査をしました。今回は、複数選択した項目をList形式でDBに保存するための設定方法を解説します。

前提： Interactive Learningは終えてる

参考：(Bubble)チェックボックスをRepeating Groupで実現する

option setsで質問事項の作成

・option setsとは

option setsとは、読み込み専用で使えるリストです。
例えば、曜日、商品の種類等、データベースを用意するほどではないけど、リストで項目を管理するのに向いてます

今回は、アンケートによくある「どうやってこのサービスを知りましたか？」という質問項目の管理に利用します。

・どこで、どうやって編集する？

横のタブの「Data」->「Option sets」を選択します。

画像1

まず、「Custom option sets」の「New option set」に名前を入力して、「Create」を押します。今回は「DidYouKnow」と命名しました。

次に、作成したCustom option setsを選択->右下の「Options」の「New option」に質問事項を入力->「Create」を押します。

画像2

これを必要な項目数分行うことでoption setsの作成は出来ます。今回はサンプルとして、4つほど作成しました。

画像8

RepeatingGropとcheckboxの設定

・elementsの配置

elementsは以下のように配置していきます

  • まずRepeation Groupをドラッグ&ドロップ
  • Repeating Groupの中に、Checkboxをドラッグ&ドロップ
  • buttonを右隣に配置

・Appearanceの設定

  • Repeating Group
    • Type of contentに先程作成したCustom option setsである「DidYouKnow」を選択
    • Data sourceをクリックして、「All DidYouKnow」を選択
  • Checkbox
    • Labelをクリックして「insert dynamic data」->「Current cell's DidYouKnow's Display」を選択
  • button
    • 「send DB」と入力（お好きな名前で大丈夫です）

配置例はこのような感じです。Repeating Groupとbuttonの位置はお好きな場所で大丈夫です。

画像3


Custom stateの作成

・Custom stateとは

elementの情報を一時的に持っておける機能です。

用途は状態に合わせて見た目を変化させたり、選択した情報をDBに格納する前に一旦保持したりするのに使えます。

・作成方法


  • Repeating Groupを選択->右上の「i」のマークを押す->Element inspectorが出てくるので、そこの「Add a new custom state」を押す
  • 「Add a new custom state」を押して、以下を入力
    • 名前：selectedDidYouKnow
    • field：text
    • List：チェックを入れる


画像9

DBの設定

Checkboxの項目を選択したら、それを格納できるDBの設計を行います。

・DB作成

  • Data->Data typesで新しいDBの作成
  • Create a new fieldをクリックして、fieldを作成
    • name: check DidYouKnow
    • FIeld type: text
    • this field is a list: チェックを入れる

画像4

WorkFlowの作成

・Custom stateの更新

Checkboxをon/offしたときに、Custom stateの情報を更新する処理を作成します

- Onのとき

  • eventの作成
    • Repeating Group内のCheckboxを選択して右クリック->下の方にある「Start/Edit workflow」を選択
    • Only whenに「This Checkbox is checked」を入力
  • actionの作成
    • 上部検索ボックスに「state」を入力->「Set state」を選択する
    • 以下を埋める
      • ELement: RepeatingGroup DidYouKnow
      • Custom state: selectedDidYouKnowList
      • Value: RepeationGroup DidYouKnow's selectedselectedDidYouKnow:plus item Current cell's DidYouKnow's Display


画像5


- Offのとき

作業時間短縮のため、Onのときの設定をコピペして編集します


  • OnのWorkFlowを右クリック->「Copy」を選択
  • 右端の「Click here to add event...」を右クリック->Pasteを選択
  • eventを以下のように編集する
    • pasteしたWorkflowを選択、Only whenの「is checked」を「isn't checked」に変更する


画像6


  • actionを以下のように修正
    • Valueの「~: plus item」の箇所を「~: minus item」に修正


画像7

・Sendボタンを押したら、選択項目をDBに格納する

参考にしたサイトと異なり、管理や集計を簡単にするため、リストの形でDBに値を保存します

・作成手順


  • buttonをクリック->Start/Edit workflowを選択
  • actionは「Create a new things」を選択


画像10



  • Typeで「SaveDidYouKnow」を選択
  • set another fieldをクリックして、以下を入力
    • check DidYouKnow add list RepeationgGroup DidYouKnow's selectedDidYouKnowList


画像11

動作確認

これで実装が完了しました！右上のPreviewを押して、動作を確認してみましょう。今回は「友人・知人」と「インターネット」にチェックを入れてテストしました。

画像12

DBには以下のように反映されました！

画像14

テーブルの左側にある鉛筆マークをクリックすると格納されてる内容の詳細が確認出来ます。このように、それぞれのチェック項目がリストの形で格納されているのが分かります！

画像13

終わりに

複数選択できる項目を扱うelementがbubbleになかったのと、意外とトリッキーな設定が必要だったため備忘録も兼ねて記事を書いてみました。これからプロトタイプの開発をガシガシ進めて行きますので、よろしくお願いします！


この記事が気に入ったらサポートをしてみませんか？