《Bubble》ドロップダウンを使ったAND検索とOR検索(条件検索)の実装方法
概要
ドロップダウンを用いた条件検索
・AND検索
・OR検索(merged with/filtered)
上記実装方法をご紹介致します。
ドロップダウンを使ったAND検索とOR検索(条件検索)の実装方法
1.はじめに
今回は、このように物件の情報をAND検索とOR検索でできるようにします。(ボタンでAND検索とOR検索を分けています)
例:AND検索した場合のパターン
1.Option Setにそれぞれの選択肢を設定します。
検索欄の項目名 | オプションセットの名前 | オプション |
駅徒歩 | OS_station_walk | 5分、10分、15分 |
間取り | OS_room_layout | ワンルーム、2K、3DK |
建物種別 | OS_building_type | アパート、マンション、その他 |
追加方法↓
2.データを用意します。
※データはファイルアップロードできるようですが、今回はオプションセットを使っていることもあり複雑なので手入力で行いました。
①テーブルとフィールドを追加
②以下のデータを入力
※入力方法↓
New entryをクリックします。
それぞれに記入し、CREATEボタンで追加します。あとはひたすら同じように追加していきます。
3.エレメントの配置
データの入力が終わったら、Designタブに移動し、各エレメントを配置します。
Repeating groupは型(Home)だけ設定します。子グループは下の画像のように型とデータを設定します。
Dropdownにもそれぞれ以下のように値を設定します。
これで準備完了です!
2.AND検索のやり方
1.ワークフローを追加
AND検索ボタンを押したときのワークフローを追加します。
2.アクションを追加
Repeating groupの表示を設定します。
3.検索条件の設定
Ignore empty constrainsにチェックを入れます。
⚠️ドロップダウンの値がどこか空のときは空の値を無視して検索をかけられるようにするためです
4.プレビュー画面で確認する
完成です!条件を選択してAND検索ボタンで確認してみましょう。
3.OR検索のやり方1(merged with)
OR検索についてはいくつかやり方があるので、2つ紹介します。1つ目は、merged withを使うやり方です。
1.ワークフローを追加
OR検索を押したときのワークフローを追加します。
2.アクションを追加
Repeating groupの表示の設定をしていきます。
3.検索条件の設定
条件を一つずつDo a search forで検索してmerged withで繋ぎます。
4.プレビュー画面で確認する
完成です!条件を選択してOR検索のボタンで確認してみましょう。
4.OR検索のやり方2(filtered)
2つ目は、filterdを使う方法です。
1.ワークフローを追加
※OR検索2のボタンを追加しました。
OR検索2のボタンを押したときのワークフローを追加します。
2.アクションを追加
Repeating groupの表示の設定をしていきます。
3.検索条件の設定
Do a search forでHomeテーブルを検索し、その後ろにfilteredをつけて、Add a new constraintで条件を追加します。
「Advanced…」を選択し、「This “データベース名”」を選択してください。今回の場合はHomeというデータベースにフィルターをかけておりますのでThis Homeとなっております。あとは任意の条件を指定してください。
条件と条件の間は「or」で繋ぎます。
4.プレビュー画面で確認する
完成です!OR検索2のボタンで確認しましょう。