ノーコーダーのつかさです。
今日はアンケートなどで利用される単一選択機能、ラジオボタンについて学習します。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
ラジオボタンの見た目を作る
bubbleでラジオボタンをデザインするのは簡単です。いつもどおり①左のInput formsからRadio Buttonsを選んで適当な場所に配置しましょう。
次に②RadioButtonAの設定画面のChoicesに選択項目を入力していきます。今回は「選択①選択②選択③」という３つの項目を用意します。
Choices内で改行を行えば、そのまま選択できるラジオボタンが増えます。
ついでに保存ボタンも下図のように作っておきましょう。
User Typeにradio valueを追加
まずRadioButtonAのステータスを保持する”radio value”という項目をUser Typeに追加します。
①Dataワークスペースに移動
②Create a new fieldをクリック
ちなみにbubbleでtypeとはデータベースのテーブルのことを指します。
Create a new fieldには下記の通り入力しましょう。
①Field name：radio value
②Field type：text
③Createをクリック
これでTypeにradio valueという新しい項目が追加されました。
テストユーザーを作成
次にテストユーザーを作っておきましょう。
①App dataタブに移動
②All Usersを選択
③New entryをクリックします。
以下のようにテストユーザーを作成。
ワークフローを設定する
ここまで準備できたら、いよいよワークフローを記述しデータベースとの連携を行なっていきます。Designワークスペースから保存ボタンの設定を開きStart/Edit workflowをクリックします。
Workflowワークスペースに移動するので下記の通り設定を進めます。
①Click here to add an action
②Data(Things)
③Make changes to thing
Make changes to thingの設定画面が開くので下記の通り入力します。
ここは“現在のユーザー(Current User)が保持しているデータ項目であるradio valueの値をRadioButtonAで選択されている値(RadioButton A’s value)に更新する”という記述になります。
ここまでできたら、記述は完成です。Dataワークスペースに戻って①radio valueに何もデータが入っていないことを確認して②Run asからPreviewを開いて動かしてみましょう！ちなみに”Run as”はtest@bubble.comユーザーとして実行するという意味です。
とりあえず”選択①”を選んで保存ボタンをクリックしてみましょう。
保存できたらDataワークスペースでtestユーザーのradio valueの項目に”選択①”という値が入っていることが確認できます。簡単ですね！
それではEnjoy NoCode！
コメント