top of page

《Bubble》ドロップダウンを使ったAND検索とOR検索(条件検索)の実装方法

概要

ドロップダウンを用いた条件検索

・AND検索

・OR検索(merged with/filtered)

上記実装方法をご紹介致します。

ドロップダウンを使ったAND検索とOR検索(条件検索)の実装方法

1.はじめに

今回は、このように物件の情報をAND検索OR検索でできるようにします。(ボタンでAND検索とOR検索を分けています)


AND検索とOR検索

例:AND検索した場合のパターン



1.Option Setにそれぞれの選択肢を設定します。

検索欄の項目名

オプションセットの名前

オプション

駅徒歩

OS_station_walk

5分、10分、15分

間取り

OS_room_layout

ワンルーム、2K、3DK

建物種別

OS_building_type

アパート、マンション、その他

追加方法↓


AND検索とOR検索2


2.データを用意します。

※データはファイルアップロードできるようですが、今回はオプションセットを使っていることもあり複雑なので手入力で行いました。


①テーブルとフィールドを追加

AND検索とOR検索3

②以下のデータを入力

AND検索とOR検索4

※入力方法↓


New entryをクリックします。

AND検索とOR検索5

それぞれに記入し、CREATEボタンで追加します。あとはひたすら同じように追加していきます。

AND検索とOR検索6



3.エレメントの配置

データの入力が終わったら、Designタブに移動し、各エレメントを配置します。


Repeating groupは型(Home)だけ設定します。子グループは下の画像のように型とデータを設定します。

エレメントの配置

Dropdownにもそれぞれ以下のように値を設定します。

エレメントの配置2

これで準備完了です!



2.AND検索のやり方

1.ワークフローを追加


AND検索ボタンを押したときのワークフローを追加します。

AND検索

2.アクションを追加

Repeating groupの表示を設定します。

AND検索2

3.検索条件の設定

Ignore empty constrainsにチェックを入れます。


 

⚠️ドロップダウンの値がどこか空のとき空の値を無視して検索をかけられるようにするためです

 
AND検索3


4.プレビュー画面で確認する

完成です!条件を選択してAND検索ボタンで確認してみましょう。

AND検索4


3.OR検索のやり方1(merged with)

OR検索についてはいくつかやり方があるので、2つ紹介します。1つ目は、merged withを使うやり方です。


1.ワークフローを追加

OR検索を押したときのワークフローを追加します。

OR検索のやり方1

2.アクションを追加

Repeating groupの表示の設定をしていきます。

OR検索のやり方2

3.検索条件の設定

条件を一つずつDo a search forで検索してmerged withで繋ぎます。

OR検索のやり方3

OR検索のやり方4

OR検索のやり方5

4.プレビュー画面で確認する

完成です!条件を選択してOR検索のボタンで確認してみましょう。

OR検索のやり方6


4.OR検索のやり方2(filtered)

2つ目は、filterdを使う方法です。


1.ワークフローを追加

※OR検索2のボタンを追加しました。

OR検索2のボタンを押したときのワークフローを追加します。

OR検索のやり方7

2.アクションを追加

Repeating groupの表示の設定をしていきます。

OR検索のやり方8

3.検索条件の設定

Do a search forでHomeテーブルを検索し、その後ろにfilteredをつけて、Add a new constraintで条件を追加します。

OR検索のやり方9

「Advanced…」を選択し、「This “データベース名”」を選択してください。今回の場合はHomeというデータベースにフィルターをかけておりますのでThis Homeとなっております。あとは任意の条件を指定してください。

条件と条件の間は「or」で繋ぎます。

OR検索のやり方10


4.プレビュー画面で確認する

完成です!OR検索2のボタンで確認しましょう。


OR検索のやり方11

関連記事

SPA
StripeConnectについて
@未完成@初期設定
@未完成@パフォーマンス
SPA
SPAガイド
@未完成@パフォーマンス
保守性
保守性高く開発するガイド
bottom of page