Skip to main content

ページ遷移を実装する

Firebaseに保存されている商品データを一覧表示し、各商品の詳細ページに遷移する管理画面を実装する​

新しいアプリを作成し、商品データを一覧表示するページを作成する​

  1. ホーム画面で [アプリを新規作成] をクリックし、 [アプリの名前] に 商品管理 と入力し [作成する] をクリックする。
  2. [ページを新しく作成する] をクリックし、 [ページの名前] に 商品一覧 と入力し、 [作成する] をクリックする。
  3. [商品一覧] ページの [編集する] をクリックする。
  4. [テーブル] を配置する。
  5. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistProducts に変更する。
  6. データソースで Onbording Firebase を選択する。
  7. [Action] で [List documents] を選択し、 [Collection] に products と入力する。
  8. [実行する] をクリックし、テーブルを選択した状態で、[エディター] の [データ] に {{ listProducts.data }} と入力する。
  9. [テキスト] を配置し、[エディター] 内の [テキスト] に 商品一覧 と入力する。

商品詳細を表示するページを作成し、詳細情報をデータフローから取得する​

  1. 編集画面からページ名の [商品一覧] をクリックし、 [新しくページを作成する] をクリックし、 [ページの名前] に 商品詳細画面 と入力し、 [作成する] をクリックする。
  2. [テーブル] の [エディター] 内の [イベントを追加] をクリックし、 [ページ] で先ほど作成した 商品詳細画面 を選択する。
  3. [バラメータを追加] をクリックし、 [Key] に documentId と、 [Value] に {{ table1.selectedRow.data.meta.id }} と入力する。
  4. [テーブル] 内の適当な商品データをクリックし、[商品詳細画面] ページへ移動する。
  5. [状態管理] をクリックし、 [グローバル] の [querierUrlParams] 内の [value] に [documentId] が入っていることを確認する。
  6. [データフロー] 内の [新規作成] をクリックし、データフロー名をgetProduct に変更する。
  7. データソースで Onbording Firebase を選択する。
  8. [Action] で [Get document] を選択し、 [Collection] に products と入力する。
  9. [Document id] に {{ querierUrlParams.value.documentId }} と入力する。
  10. [実行する] をクリックし、 [状態管理] から [データフロー] の [getProduct] 内に選択した商品の詳細情報が入っていることを確認する。
  11. ヘッダー左上のページ名をクリックし、[商品詳細画面] 横の [目アイコン] をクリックし、ナビゲーションから非表示にする。