削除機能を実装する
Firestore に保存されている商品をテーブルから選択し、削除する
商品の一覧情報をテーブルに表示する
- [データフロー] 内の [新規作成] をクリックし、データフロー名を
listProducts
に変更する。 - データソースで
Onboarding Firebase
を選択する。 - [Action] で
List documents
を選択し、 [Collection] にproducts
と入力する。 - [実行する] をクリックする。
- [テーブル] を配置し、エディターの [データ] に
{{ listProducts.data }}
と入力する。
データの削除を行うコンポーネントを配置する
- [カラム] を配置する。
- [カラム] の左側に先ほど配置した**[テーブル]** を、左側に [モーダル] と [テキスト] を配置する。
- [モーダル] を選択し、モーダル内に [ボタン] と [テキスト] を配置する。
- カラムの右側に設置した [text1] を選択し、エディター内の [テキスト] に
商品データの削除
と入力する。 - カラムの右側に設置した [modal1] を選択し、エディター内の [ボタンラベル] に
{{ table1.selectedRow.data.title }} を削除する
と入力する。 - モーダル内に設置した [text2] を選択し、エディター内の [テキスト] に
{{ table1.selectedRow.data.title }} を本当に削除しますか?
と入力する。 - モーダル内に設置した [button1] を選択し、エディター内の [ラベル] に
削除を実行する
と入力する。 - [カラム] の幅を調節する。
商品データを削除するデータフローを作成し、モーダル内のボタンと紐づける
- [データフロー] 内の [新規作成] をクリックし、データフロー名を
deleteProduct
に変更する。 - データソースで
Onboarding Firebase
を選択する。 - [Action] で
Delete document
を選択し、 [Collection] にproducts
と入力する。 - [Document id] に
{{ table1.selectedRow.data.meta.id }}
と入力する。 - [成功時に実行するアクション] をクリックし、
listProducts
を選択する。 - モーダル内に設置した [button1] を選択し、[イベントを追加する] をクリックする。
- 追加したイベント内の [データフロー] で
deleteProduct
を選択する。