Implementing a Create Feature

Adding New Products to Firestore

Displaying Product List Information in a Table

1. Click [Create] in [Dataflows] and change the dataflow name to listProducts.
2. Select Onboarding Firebase as the data source.
3. Choose List documents in [Action] and enter products in [Collection].
4. Click [Run].
5. Place a [Table] and enter {{ listProducts.data }} in the editor's [Data].

Placing Components for Adding Products

1. Place a [Column].
2. On the left side of the [Column], place the previously positioned [Table], and on the right side, place two **[Input]**s, one [Select], one [Text Area], and one [Button].
3. In the editor of the components on the right side of the column, enter id, title, category, description, and Add Product respectively for [input1], [input2], [select1], [textarea1], and [button1].
4. Adjust the width of the [Column].

Fetching Product Category List with a Dataflow and Displaying it in Select

1. Click [Create] in [Dataflows] and change the dataflow name to listCategories.
2. Select Onboarding Firebase as the data source.
3. Choose List documents in [Action] and enter categories in [Collection].
4. Click [Run].
5. Place a [Select].
6. Open the editor for the [Select] and enter {{ listCategories.data.map(d => d.id) }} in [Values].
7. Enter {{ listCategories.data.map(d => d.name) }} in [Labels].

Creating a Dataflow to Add Products and Linking it to the Button

1. Click [Create] in [Dataflows] and change the dataflow name to createProduct.
2. Select Onboarding Firebase as the data source.
3. Choose Set document in [Action] and enter products in [Collection].
4. Enter the following in [Data]:

{
  "id":          {{ input1.value }},
  "title":       {{ input2.value }},
  "category":    {{ select1.value }},
  "description": {{ textarea1.value }}
}

5. Select [button1], click [Add], and select createProduct in [Dataflow].

Disabling the Button if There Are Empty Fields

1. Select [button1] and enter {{ !input1.value || input2.value === '' || select1.value === '' || textarea1.value === '' }} in [Disabled].