今回は複数条件を指定した絞り込み検索（OR検索）の実装方法を紹介します。プラグイン（有料です）を使って簡単に実装出来る方法を紹介したいと思います。
AND検索は以下を参照ください。この記事はAND検索とほぼ同じ内容（焼き直し）だったりします、、
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。
ゴールイメージ
こんな感じ趣味をタグで表示し、選択した趣味の情報を含んでいるユーザーを表示します。
実装方法
Data typeとオプションセットの準備
Option setsにhobbyを準備します。それをData typesのUserに設定します。
特別なことはしていません。
Custom statesを準備
以下のCustom statesを準備します。searchというページ配下にcustom statesを作成しています。
- hobby_list：選択した趣味の情報を格納
- user_list_all：全ユーザーリストを格納
- user_list_result：絞り込み検索結果のユーザーリストを格納
- user_list_temp：一時的に絞り込み検索結果のユーザーリストを格納
プラグインのインストール
以下のプラグイン「Floppy: localStorage, List Shifter」を利用します。
残念ながら有料です。。。（無料だと、Simple looperというプラグインを使っても実現できますが、処理はもう少し複雑になります）
表示するリピーティンググループを作成
検索結果を表示するリピーティンググループを作成します。
Custom statesで設定したuser_list_resultを表示します。
選択項目（hobby)とボタンの作成
趣味（hobby)を選択するためのリピーティンググループを作成します。
以下のようなイメージになります。
プラグイン「Floppy」のエレメントを配置
インストールしたプラグイン「Floppy」のエレメント「List Shifter PRO」を画面上に配置します。Data Type of ListとList to Shiftは以下のように設定します。
Workflowの設定
ページロード時のwork flow
ページロード時にはCustom states 「user_list_result」と「user_list_all」にユーザー一覧を保存するようにします。今回filterでhobbyがempty出ないユーザーを設定していますが、これは設定しなくても問題有りません。
趣味が選択・選択解除された際のcustom states 「hobby_list」の追加、削除
趣味（hobby)が選択された場合、選択解除された場合にcustom states 「hobby_list」にhobbyを追加、削除するためのwork flowを作成します。特別な処理はしていません。
プラグインFloppy関連のwork flowを追加
画面上に配置したListShifterPROに関連したアクションを追加します。この部分が肝になります。
以下のようにトリガーを追加します。
アクションはこちらです。custom_statesの「user_list_temp」の値に対して選択されたhobbyを含むユーザーを設定します。
2つ目のステップでは「user_list_result」に先ほどのhobbyを含んだユーザーをマージします。
その次のステップ（ステップ３）では、「user_list_temp」の値をクリアします。
これで選択された趣味（hobby）を含んだユーザーリストがどんどんマージされていきます。
次に処理が完了した場合のトリガーとアクションを追加します。トリガーはこちらです。
アクションはこちら。更新されたuser_listをリピーティンググループに反映させます。
検索ボタンにアクションを設定
検索ボタンを押下した場合のアクションとして以下のようにcustom states「user_list_result」を空にする処理とListShifterPROのアクションを起動するためのアクションを追加します。
以上で完了です。
必要に応じてクリアボタンを押した場合の処理を追加してください。
最後に
如何でしたでしょうか？バックエンドワークフローを使うと面倒な複数選択の絞り込み検索処理もこんなに簡単に実装出来ます。
是非試してみてください。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。