削除機能を実装する

Firestore に保存されている商品をテーブルから選択し、削除する

商品の一覧情報をテーブルに表示する

1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistProducts に変更する。
2. データソースで Onboarding Firebase を選択する。
3. [Action] で List documents を選択し、 [Collection] に products と入力する。
4. [実行する] をクリックする。
5. [テーブル] を配置し、エディターの [データ] に {{ listProducts.data }} と入力する。

データの削除を行うコンポーネントを配置する

1. [カラム] を配置する。
2. [カラム] の左側に先ほど配置した**[テーブル]** を、左側に [モーダル] と [テキスト] を配置する。
3. [モーダル] を選択し、モーダル内に [ボタン] と [テキスト] を配置する。
4. カラムの右側に設置した [text1] を選択し、エディター内の [テキスト] に 商品データの削除 と入力する。
5. カラムの右側に設置した [modal1] を選択し、エディター内の [ボタンラベル] に {{ table1.selectedRow.data.title }}　を削除する と入力する。
6. モーダル内に設置した [text2] を選択し、エディター内の [テキスト] に {{ table1.selectedRow.data.title }}　を本当に削除しますか？ と入力する。
7. モーダル内に設置した [button1] を選択し、エディター内の [ラベル] に 削除を実行する と入力する。
8. [カラム] の幅を調節する。

商品データを削除するデータフローを作成し、モーダル内のボタンと紐づける

1. [データフロー] 内の [新規作成] をクリックし、データフロー名をdeleteProduct に変更する。
2. データソースで Onboarding Firebase を選択する。
3. [Action] で Delete document を選択し、 [Collection] に products と入力する。
4. [Document id] に {{ table1.selectedRow.data.meta.id }} と入力する。
5. [成功時に実行するアクション] をクリックし、 listProducts を選択する。
6. モーダル内に設置した [button1] を選択し、[イベントを追加する] をクリックする。
7. 追加したイベント内の [データフロー] で deleteProduct を選択する。