【Bubble】 Bubbleでの超重要な機能「データベース」 ４、Workflowを使って値を指定して削除しよう
こんにちは。NoCode Ninjaです。
今回も前回に引き続き「データベース（以下DB）」について紹介します。
前回はDB関連の実装で非常に良く使う「繰り返し処理」について学びました。
前回はこちら
今回は、これらの値を削除する動作の設定を紹介します。
ここまで出来てきたら、DB周りの基本的なことは一通りこなせるのではないかと思います。
それでは、いってみます。
入っている値を削除する
ここまでの流れは、DBに値を入れて表示するという繰り返し処理のWorkflowを作りました。
続いて、入れた値を削除するという設定をしてみましょう。
指定して削除
今回は「Dropdown」エレメントを使って項目を指定し、削除ボタンを押して削除する機能をつけてみます。
Dropdownエレメントを選択し、下のほうに貼り付けます。
Buttonそのものは既に「作成」Buttonがありますのでそれをそのままコピペし、表示を「削除する」に置き換えましょう。
- Placeholderは「削除したい項目を選択」に書き換える
- Choices styleは「Dynamic choices」を指定
- Type of choicesは「test」を選択
- Choicesは空欄をクリックして「Dynamic Data」から「RepeatingGroup test's List of tests」を選択
- Option captionも「Dynamic Data」から「Current option's corner1」を選択
これらを設定すると、以下のようになります。
BackgroundやBorderなども少しいじりました。
（デフォルトでは何故か選択肢の背景が青色だったり・・）
上記の設定で、Repeating Groupの中のtestから直接選択可能になりました。
この選択したものを、Workflowを使って削除するという指示を設定します。
Buttonエレメントですが、既にある「作成」Buttonをコピペしちゃいましょう。
「選択して削除」に書き換えました。
続いて、「Start/Edit Workflow」でWorkflowへ。
Data(things)から「Delete things...」を選択
設定はシンプルです。下記のように設定します。
Dropdown指定の値に合わせて削除が動作します。
設定はこれで完了です。
各エレメントのサイズやUIを整えて、実際に試してみましょう。
うまくいきました♪
これで自分で書いて自分で消すということが出来るようになりました。
実際にURLを載せておくので、試してみてください。
まとめ
いかがだったでしょうか。
エレメントを複数絡めてWorkflowを設定しても、流れが一つ一つきちんと考えれば全く難しくないことがわかったのではないかと思います。
Workflow含め全て英語表記なので細かいところはまだとっつきにくさは感じると思いますが、これから徐々に紹介していくので色々試してみましょう！
それでは、また！
