複数のドロップダウンリストを使っての絞り込み検索の実装方法を紹介します。以下のブログで一つのドロップダウンリストを使った絞り込み検索を紹介したのでその応用編になります。
以下のブログの続きになりますのでまずは1つのドロップダウンリストを使った絞りこみ方法を確認したのちにこちらを見てもらえるとありがたいです。
ゴールイメージ
商品リストに対してカテゴリーと販売状況のドロップダウンリストで絞り込みを行うイメージで実装します。
こちらの動画が完成イメージになります。
カテゴリ、販売状況の選択内容に従った結果がリストで表示されています。わかりやすいように販売状況とカテゴリを表示するようにしています。
実装方法
複数のドロップダウンの絞り込み方法のポイントとなる箇所を中心に説明します。それ以外の箇所は割愛するところもありますがご容赦ください。
前提となる準備
- データベースは以下のように商品、カテゴリを準備しています。
- カテゴリは別テーブルで作成したドキュメントを商品コレクションの中にDoc Referenceとして設定しています。各カテゴリのドキュメントを識別するためのcategory_numも商品コレクションの中に設定しています。（この値は前のブログで確認してください）
- 販売状況は[isSoldOut]をBooleanで保持しています。
- 商品リストは以下のようにConditionalBuilderを使ってドロップダウンで絞り込み検索を実施した場合に表示するリスト、ドロップダウンが選択されていない場合に表示するリスト（全件表示）を条件分岐させるようにしています。
ここも前回のブログを参考にしてもらえればと思いますが、今回はこの条件の設定を変えることで複数のドロップダウンに対応していきます。 - 実際の画面で何を表示するかはご自由に設定いただければよいですが、ここでは販売状況、カテゴリーをわかりやすいよう表示しています。
Page State Variablesの登録
- ドロップダウンで選択されたカテゴリ、販売状況を格納するためのLocal Page State Variablesを設定します。
カテゴリは前回実施していますので今回は販売状況（isSoldout)を説明します。 - 以下のようにBoolean型でisSoldoutを設定するような箱を作ります。
ドロップダウンリストの設置
- 画面にドロップダウンリストを設置します。ドロップダウンリストはForm Elementsに含まれていますのでそちらから選択して適当な場所に配置してください。
- ドロップダウンの選択項目の設定
- 今回は以下のように「選択してください」「販売中」「売り切れ」を表示するようにしています。
ドロップダウンリストの選択値をPage State Variablesに設定
- ドロップダウンリストで販売状況が選択された際にその値をPage State Variablesに設定するためのアクションを作成します。
- ドロップダウンリストを選択した状態でActionsを押します。
- アクションの全体図は以下のようになっています。
大まかな流れは売り切れかどうかの判定→販売中かどうかの判定としています。これで「売り切れ」「販売中」「選択してください」のどれが選ばれたかがわかります。
- ひとつづつ中身を見ていきます。一番上の売り切れかどうかの判定は以下のように実施しています。
ドロップダウンが選択されている、且つ、選択された値が「売り切れ」ということを条件にしています。
- 結果がTrue（売り切れ）の場合は、以下のようにPage State VariablesのisSoldoutに[True]を設定しています。
- 売り切れでない場合は、以下のように販売中かどうかをチェックしています。一番目の売り切れかどうかのチェックとほぼ同じですね。
- そして販売中の場合は以下（左側）のようにPage State Variablesに[False]を格納します。販売中でない場合（「選択してください」が選ばれた場合）はPage State Variablesの値をリセットしています（右側）。
ListViewを表示する際の条件分岐の設定
- ConditionalBuilderの設定は非常に単純です。
以下のようにカテゴリもしくは販売状況のドロップダウンの選択が「選択してください」でない場合はフィルタで絞り込んだリストを表示。それ以外（つまりどちらかは「選択してください」以外が選ばれている）はフィルタを適用したリストを表示、としています。
フィルタで絞り込んだリストを作成
カテゴリ、販売状況のどちらか、もしくは両方で何かしらの値が選択された場合に表示する商品リストの設定を説明します。
- カテゴリと販売状況のそれぞれでフィルタを設定し、AND条件で繋げます。
カテゴリ、販売状況のそれぞれがPage State Variablesに設定された値と一致しているものをフィルタリングしています。
はい、これでフィルタリングの処理は動作しているかと思います。
どうでしょうか？
まとめ
今回は複数のドロップダウンリストを使っての絞り込み検索の処理を紹介しました。前回の一つのドロップダウンでの絞りこみの続きになりますのでそちらを見て頂いていた方にとっては理解いただけたのでは、と期待しています。
基本的なやり方はドロップダウンの値をPage State Variablesに格納してそれを使ってフィルタリングするという方法でした。
データベースの作りによってはもう少し別のやり方もありそうですが、このようなやり方もあるんだ、と思っていただければよいかと思います。
是非、もっとスマートなやり方を開発してくださいね。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。