目次
今回作成するもの
set stateを用いて、エレメントを複数選択し、データを保存するという機能を実装します。
挙動の割に複雑な実装方法になります。
かつset stateの実用的な使用法になりますので、必ずマスターしておきましょう。
今回は動物を複数選択し、リストに保存するwebアプリを作成していきます。
＊Bubbleのアカウントをまだ作成していない方は、以下の記事を参考にアカウントを作成してください。
▶Bubble（バブル）の使い方を徹底解説！ノーコードでアプリを作ろう！
使用エレメント
- Text
- RepeatingGroup
- Alert
- Button
作成手順
1. データの作成
まずデータのtypeとfieldを作成していきましょう。
今回はOption setsも使いますので、用意します。
Option setsはアプリ自体に用意できるデータで、ユーザーはCRUDでいうReadのみができると考えてもらって大丈夫です。
Displayに複数動物の名前を記入します。
次に動物のリスト保存先を作成します。
List_animalというOption setsを型に取るデータを作成します。
2. エレメントの配置
全体のエレメント配置から説明していきます。
まず、Alertを上に固定配置します。
Repeating GroupのなかにTextを配置し、下にbuttonを配置します。
詳しくはElements treeを参照してください。
RepeatingGroupはOption setsのanimalを取得するように設定します。
中のtextはOption setsのDisplayを表示するようにしましょう。
3. Custom statesとconditionalの設定
indexにanimalsというCustom statesを追加します。
型はOption setsのanimalを使い、List形式にすることを忘れずに設定しましょう。
textのconditionalに少し複雑な条件を設定します。
後ほどわかることではありますが、indexに設定したCustom statesのanimalsにこのanimalデータが入っている場合という条件を設定します。
ワークフローを作成する際にこの挙動の意義が認識できると思います。
4. ワークフローの作成
まずページをロードした際のワークフローを設定します。
set statesで保存した動物一覧を取得できるように設定しましょう。
こうすることで、現在保存されている動物一覧がどの個体かを識別することができます。
現在保存されている動物一覧がなかった際にデータを作成する処理を書きます。
条件を記述後、データ作成をする処理を書くのですが、図のようにindexのcustom stateをset listすることで実装しましょう。
Alertはデータ作成された際にメッセージを表示するためのものです。「一覧を作成しました。」と表示するようにしましょう。
現在保存されている動物一覧があった際にデータを更新する処理を書きます。
すでにあるデータを先ほどと同じようにindexのcustom stateをset listすることで実装しましょう。
こちらのAlertはデータ更新された際にメッセージを表示するためのものです。「一覧を更新しました。」と表示するようにしましょう。
最後にテキストをクリックした際の処理を書いていきます。
indexのanimalsにクリックしたテキストのanimalがあった際は、indexにそのanimalを減らします。
indexのanimalsにクリックしたテキストのanimalがなかった際は、indexにそのanimalを増やします。
この辺りは少しややこしく、テキストでの説明を見るよりも、下記の画像をじっくり見て実装してください。
👇減らす場合の処理
👇増やす場合の処理
実際に使ってみた
試しに幾つかのテキストをクリックしてみましょう。
選択されたものが保持されているはずです。
ではここで一度リロードしてみましょう。
すると、選択されていたものが、リセットされています。
これはデータ自体は保存処理されていないからですね。
ではもう一度テキストを選択し、保存すると、下記のように選択されたものが判別でき、リロードしても変化がない状態へと持っていくことができたと思います。
今回紹介したものはどのサービスでもよく使われる手法なので、必ずマスターしましょう。
