Implementing Page Navigation

Display a list of product data stored in Firestore and implement navigation to each product's detail page

Create a new app and set up a page to display product data

1. Place a [Table] on the canvas.
2. Click [Create New] in [Dataflows] and change the dataflow name to listProducts.
3. Select Onboarding Firebase as the data source.
4. Choose List documents in [Action] and enter products in [Collection].
5. Click [Run], and with the table selected, enter {{ listProducts.data }} in [Data] of the [Inspect].
6. Place a [Text] and enter Product List in the [Text] of the [Inspect].

Create a page to display product details and retrieve detailed information from a dataflow

1. Click the menu at the top left of the editor, click [Create], and from the dropdown menu, click [Create Page].
2. Enter Product Details Page in [Page name] and click [Create].
3. Click [Add Event] in the [Inspect] of the [Table], and select the Product Details Page created earlier in [Page].
4. Click [Add Parameter], enter documentId for [Key], and {{ table1.selectedRow.data.meta.id }} for [Value].
5. Click on any product data within the [Table] and navigate to the [Product Details Page].
6. Click [Create] in [Dataflows] and change the dataflow name to getProduct.
7. Select Onboarding Firebase as the data source.
8. Choose [Get document] in [Action] and enter products in [Collection].
9. Enter {{ querierUrlParams.value.documentId }} in [Document ID].
10. Click [Run] and from [State] select the [getProduct] dataflow.
11. Click the page name at the top left of the header, click the [Eye Icon] next to [Product Details Page], and set it to hidden from navigation.