ノーコーダーのつかさです。
今日はアンケートなどでよく利用されるチェックボックスについて勉強していきましょう。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
Checkboxの見た目を作る
bubbleでチェックボックスをデザインするのは簡単です。いつもどおり左のInput formsからCheckboxを選んで適当な場所に配置しましょう。
見た目はこれで完成です。しかしせっかくなのでデータベースと連携もおこなうためにワークフローもいじってみましょう。
User TypeにCheckboxを追加
まずCheckboxのステータスを保持する”Checkbox value”という項目をUserテーブルに追加します。
Dataワークスペースに移動して、User TypeからCreate a new fieldをクリックしましょう。ちなみにbubbleでtypeとはデータベースのテーブルのことを指します。
Create a new fieldには下記の通り入力しましょう。
①Field name：Checkbox value
②Field type：yes/no
③Createをクリック
これでTypeにCheckboxという新しい項目が追加されました。
テストユーザーを作成
次にテストユーザーを作りましょう。
①App dataタブを開く
②All Usersを選択
③New entryをクリック
以下のようにテストユーザーを作成。
Checkboxのデフォルトの値は”no”, Emailは”test@bubble.com”にしておきます。
ワークフローを作成し✔がつけられた時にCheckbok valueをyesに変更する
ここからは少しめんどくさいのですが、作業としては
“Checkbox”が✔された時にUser Typeが保持しているCheckbox valueの値を”no”から”yes”に切り替える
という処理を記述します。
これができればチェックボックスの値をデータベースの値として利用することができます。一つずつ見ていきましょう。
①Workflowワークスペースに移動
②Click here to add an eventをクリック
③Elementsを選択
④An input’s value is changed
⑤Element：Checkboxを選択
⑥Only when：Current User’s Checkbox value is “no”と入力
ここで記述している処理は“チェックボックスに✔が入った時、現在のユーザーのCheckbox valueの値がnoだった場合”という条件を書いています。
次に上で書いた条件下で、どのような処理が走るかを記述します。
①Click here to add an actionをクリック
②Data(Things)を選択
③Make changes to thingをクリック
④Things to change：Current User
⑤Checkbok value = “yes”
これは”Current UserのtypeのCheckbox valueをyesに変更する”という処理です。
これでCheckboxに✔が入っていない時に✔が入れば、Checkbox valueがyesに書き換わるようになりました。
動作を確認してみましょう。Checkbox valueがnoになっていることを確認しつつ”Run as”からPreviewを開き、Checkboxに✔を入れてみましょう。
Run asは”test@bubble.comユーザーとして実行する”という意味です。
チェックボックスに✔を入れてもう一度Checkbox valueを確認します。
Refresh dataをクリックしてデータを更新するとCheckbox valueが”yes”に書き換わっていることを確認できます。
実はこれだけでは不完全で、逆の処理も書かなければなりませんが、長くなるのでここでは割愛します。
逆の処理とは”Checkboxに✔が入っている時に✔を外すとCheckbox valueがnoに書き換わる”という処理です。練習がてらぜひチャレンジしてみてください。
まとめ
アンケートの複数選択などで重宝するチェックボックス機能ですが、データベースと絡めると意外と厄介であることがわかります。一つずつ丁寧に処理を学習していきましょう。
それではEnjoy NoCode！
コメント