Implementing a Delete Feature

Select and Delete Products Stored in Firestore from a Table

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 Deleting Data

1. Place a [Column].
2. On the left side of the [Column], place the previously positioned [Table], and on the left side, place a [Modal] and a [Text].
3. Select the [Modal] and place a [Button] and a [Text] inside it.
4. Select the [text1] on the right side of the column and enter Delete Product Data in the editor's [Text].
5. Select the [modal1] on the right side of the column and enter Delete {{ table1.selectedRow.data.title }} in the editor's [Button label].
6. Select the [text2] inside the modal and enter Are you sure you want to delete {{ table1.selectedRow.data.title }}? in the editor's [Text].
7. Select the [button1] inside the modal and enter Execute Deletion in the editor's [Label].
8. Adjust the width of the [Column].

Creating a Dataflow to Delete Product Data and Linking it to the Button in the Modal

1. Click [Create] in [Dataflows] and change the dataflow name to deleteProduct.
2. Select Onboarding Firebase as the data source.
3. Choose Delete document in [Action] and enter products in [Collection].
4. Enter {{ table1.selectedRow.data.meta.id }} in [Document ID].
5. Click [Success events] and select listProducts.
6. Select the [button1] inside the modal and click [Add].
7. In the added event, select deleteProduct in [Dataflow].