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 {{ }} 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: {{ ? : '' }} 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: {{ ? : '' }}.

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 {{ => }} in [Values] and [Labels].
  9. Set {{ ? : '' }} 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 {{ }} in [Document ID].
  6. Write the following in [Data]:
  "id":          {{ }},
  "category":    {{ select1.value }},
  "title":       {{ input1.value }},
  "description": {{ textarea1.value }}
  1. Check [Success events] and select listProducts.
  2. Open the [Modal], change the [Button] label to Update, and select updateProduct in [Dataflow].
  3. Enter the following in [Default value] for [Input] and [Text Area]: {{ ? : '' }} {{ ? : '' }}
  4. 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 {{ ? : '' }} 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 {{ }} in [Key], [Comparison Operator (Symbol)], and [Value] respectively.
  7. Open the [Inpsect] for [table2] and enter {{ }} in [Data].
  8. Open [Preview] and confirm that user information is dynamically displayed.