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