ドキュメント
アプリの構築
ユースケース
テーブルのデータを絞り込む

テーブルのデータを絞り込む

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

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

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

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

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