Skip to main content

削除機能を実装する

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

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

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistProducts に変更する。
  2. データソースで Onbording Firebase を選択する。
  3. [Action]List documents を選択し、 [Colleciton]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. データソースで Onbording Firebase を選択する。
  3. [Action]Delete document を選択し、 [Colleciton]products と入力する。
  4. [Document id]{{ table1.selectedRow.data.meta.id }} と入力する。
  5. [成功時のトリガーを設定する] をクリックし、 listProducts を選択する。
  6. モーダル内に設置した [button1] を選択し、エディター内の [データフロー]deleteProduct を選択する。

削除が正常に実行されていることをプレビュー画面で確認する