Skip to main content

絞り込み機能を実装する

Firebaseに保存されている商品データを一覧表示し、商品名、カテゴリ、評価で絞り込みを行う

コンポーネントを配置する

  1. [カラム] を配置する。
  2. [カラム] 内の [+] を2回クリックする。
  3. [カラム] の中に左から順に、[インプット][セレクト][インプット][ボタン] を配置する。
  4. [カラム] の下に [テーブル] を配置する。
  5. 配置した [インプット][セレクト][インプット][ボタン][ラベル] にそれぞれ 商品名で絞り込むカテゴリで絞り込む評価で絞り込む検索する と入力する。
  6. 評価で絞り込む のインプットを選択し [タイプ]number を選択する。

絞り込み可能な商品一覧情報をテーブルに表示する

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistProducts に変更する。
  2. データソースで Onbording Firebase を選択する。
  3. [Action]List documents を選択し、 [colleciton]products と入力する。
  4. [フィルターを追加する] を3回クリックする。
  5. 1つ目のフィルターに == を選択した状態で、[key]title と入力し、[value]{{ input1.value }} と入力する。
  6. 2つ目のフィルターに == を選択した状態で、[key]category と入力し、[value]{{ select1.value }} と入力する。
  7. 3つ目のフィルターに >= を選択した状態で、[key]rate と入力し、[value]{{ input2.value }} と入力する。
  8. [実行する] をクリックし、テーブルを選択した状態で、[エディター][データ]{{ listProducts.data }} と入力する。

カテゴリを取得してセレクトに表示し、検索ボタンにデータフローを紐づける

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistCategories に変更する。
  2. データソースで Onbording Firebase を選択する。
  3. [Action]List documents を選択し、 [colleciton]categories と入力する。
  4. [実行する] をクリックし、セレクトの [エディター][Values][Labels] に それぞれ
    {{ listCategories.data.map(d => d.name) }}
    {{ listCategories.data.map(d => d.name) }}
    と入力する。
  5. ボタンを選択した状態で [エディター][データフロー]listProducts を選択する。

絞り込み機能が正常に動作していることを確認する。