Bubbleの基本的な使い方（その8）ードロップダウンボックスの作成と選択データの表示

今回はノーコードツールBubbleを使って、ドロップダウンメニューを作成します。
ドロップダウンボックスで選択した項目に応じて、「Repeating Group」で表示しているデータを変化させます。
Bubbleの基本的な使い方（その4）ー「Floating Group」 と「Repeating Group」を使ってみる　で簡単な人員リストを作成しました。
これに「性別」を追加して、ドロップダウンで選択した性別のみデータを表示させるようにします。
作成の手順は以下になります。

①データベースに性別の項目を追加
②デザイン画面でドロップダウンボックスを設置
③ドロップダウンメニューのプロパティを設定

現状の画面はこのようになっています。
顔写真、氏名のみのシンプルなリストをRepeating Groupで繰り返し表示させています。

1.データベースに性別の項目を追加

それではまずデータベースに性別の項目を追加する前に「Option sets」を作成しておきます。「Option sets」にあらかじめリストを作っておくことで、データベースからOption setsの項目を選ぶことができます。
ドロップダウンメニューで表示されるリストをOption setsで作成しておくイメージです。

データ画面からOption setsを選択して、下記のように新規作成します。
■Option sets name : 　Gender Select
■Options:　すべて、男、女

次に下記画像のようにデータベース「Test User」に性別を表す「User Gender」のフィールドを追加します。
作成時に「This Field is a list(multiple entries)」に忘れずにチェックを入れてください。これはリスト形式のフィールドを作成する時に必要な設定になります。

User Genderフィールドが追加されたので、データベースに性別データを設定していきます。
app dataを見てみるとフィールドに「User Gender」が見当たりませんが、「4additional fields」をクリックすると隠れていたフィールドを追加できます。

DBに「User Gender」が表示されたので、各個人のデータを編集します。
DB表の左側に「編集アイコン」があるのでクリックしてデータを編集します。「User Gender」に「すべて」と、男性なら「男」をそれぞれ追加（add）します。「すべて」はすべてのデータを表示させる時に必要になります。
３つの個人データに性別をそれぞれ設定してデータベースの設定は完了です。

2.デザイン画面でドロップダウンメニューを設置

次にデザイン画面でドロップダウンボックスを設置します。
Input formのエレメントから「ドロップダウン」を選択して画面に配置します。また「性別を選択」というテキストもドロップダウンの横に配置します。

3.ドロップダウンメニューのプロパティを設定

ドロップダウンのプロパティで下記のように設定します。
ここではあらかじめ作成しておいたオプションセット「Gender Select」を読み込んで、ドロップダウンメニューに表示するための設定をしています。

次にドロップダウンで選択した性別のデータのみ画面に表示させる設定をします。
「RepeatingGroup Test User」のプロパティを開きます。

①「RepeatingGroup Test User」のデータソースに「Search for Test Users」を指定し、
②さらに「Search for Test Users」のプロパティで下記条件を追加します。
「User Gender contains Dropdown 性別を選択's value」

これでドロップダウンで選択された性別（すべて、男、女）を含んだデータが繰り返し表示されるはずです。

それでは動作確認してみましょう！
ドロップダウンで「すべて」「男」「女」を選択すると該当データのみ表示されました。

今回はここまでです！無事指定のデータは表示されたでしょうか？
「Repeating Group」のデータ表示にはいろいろな条件が指定できます。
今回の方法を応用すればデータのソートなどデータ表示方法に幅がでますね！

ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。

Mentaでメンターサポート
https://menta.work/user/22914

ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346

また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンの入会
サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。

月額500円となります。

入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。

参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。

https://note.com/hamasan918/m/me6f7be9ad4d8