Quick Start - Firebase

Assuming a scenario of an e-commerce company, this guide will help you build an internal management interface that allows you to:

• Display a list of product information.
• View detailed information about products.
• Update product information.
• Display a list of users who have purchased products.

Data Integration

We will be using [Onboarding Firebase] which is already connected, so no additional connection setup is required.

For connecting your own data source, please refer to this guide.

Displaying Product Information in a List

1. Drag & drop [Text] from the right [Components] onto the canvas.
2. In the right [Inspect], enter Product List in [Text].
3. Change the size to large in the right [Inspect] under [Size].
4. Drag & drop [Table] from the right [Components] just below the [Text] you placed.
5. Click [Create] in [Dataflows].
6. Rename the dataflow to listProducts.
7. Choose [Onboarding Firebase] as the data source.
8. Select List documents in [Action] and type products in [Collection].
9. Click [Run].
10. Select the placed table and enter {{ listProducts.data }} in [Data] in the [Inspect].

Displaying Detailed Product Information

Display the details of the product data selected in the table dynamically on the right side.

1. Drag & drop [Column] to the bottom of the canvas from the right [Components].
2. Place the already existing [Table] on the left side of the [Column] and a [Text] on the right.
3. Enter Product Name: {{ table1.selectedRow.data ? table1.selectedRow.data.title : '' }} in [Text] within the [Inspect].
4. With [Text] selected, click the [Duplicate Icon] next to the [Delete Icon].
5. Modify the newly duplicated [Text] in the [Inspect] to Price: {{ table1.selectedRow.data ? table1.selectedRow.data.price : '' }}.

Updating Product Information

Creating a Form for Product Updates

Update the selected product data information in the table. First, create a dataflow to fetch the category list and reflect it in the select.

1. Place a [Modal] on the right of the already placed [Column] and label it Update Product Information.
2. Inside the [Modal], place [Select], [Input], [Text Area], and [Button].
3. Click [Create] in [Dataflows].
4. Rename the dataflow to listCategories.
5. Choose [Onboarding Firebase] as the data source.
6. Select List documents in [Action] and input categories in [Collection], then click [Run].
7. Click the [Select] inside the [Modal].
8. Enter {{ listCategories.data.map(d => d.name) }} in [Values] and [Labels].
9. Set {{ table1.selectedRow.data ? table1.selectedRow.data.category : '' }} as the [Default value].

Creating a Dataflow for Product Updates and Linking it to the Button

1. Open the [Modal] and change the labels of [Select], [Input], and [Text Area] to Category, Product Name, and Description, respectively.
2. Click [Create] in [Dataflows] and rename the dataflow to updateProduct.
3. Select Onboarding Firebase for [Select resource].
4. Input Update document in [Action] and products in [Collection].
5. Enter {{ table1.selectedRow.data.meta.id }} in [Document ID].
6. Write the following in [Data]:

{
  "id":          {{ table1.selectedRow.data.id }},
  "category":    {{ select1.value }},
  "title":       {{ input1.value }},
  "description": {{ textarea1.value }}
}

7. Check [Success events] and select listProducts.
8. Open the [Modal], change the [Button] label to Update, and select updateProduct in [Dataflow].
9. Enter the following in [Default value] for [Input] and [Text Area]: {{ table1.selectedRow.data ? table1.selectedRow.data.title : '' }} {{ table1.selectedRow.data ? table1.selectedRow.data.description : '' }}
10. Open [Preview] and confirm that the product information update is working correctly.

Displaying a List of Users Who Purchased Products

1. Drag & drop [Text] and [Table] below column1.
2. Open the [Inpsect] for [Text] and enter Users who purchased {{ table1.selectedRow.data ? table1.selectedRow.data.title : '' }} in [Text].
3. Click [Create] in [Dataflows], change the dataflow name to listUsers, and check Run query automatically when changes occur.
4. Select Onboarding Firebase in [Action].
5. Enter List documents for [Action] and users for [Collection].
6. Click [Add Filter], and enter productIds, array-contains, and {{ table1.selectedRow.data.id }} in [Key], [Comparison Operator (Symbol)], and [Value] respectively.
7. Open the [Inpsect] for [table2] and enter {{ listUsers.data }} in [Data].
8. Open [Preview] and confirm that user information is dynamically displayed.