bubble

【bubble】ラジオボタン(radio button)で単一選択を実装してみよう!

ノーコーダーのつかさです。

今日はアンケートなどで利用される単一選択機能、ラジオボタンについて学習します。

bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

ラジオボタンの見た目を作る

bubbleでラジオボタンをデザインするのは簡単です。いつもどおり①左のInput formsからRadio Buttonsを選んで適当な場所に配置しましょう。

次に②RadioButtonAの設定画面のChoicesに選択項目を入力していきます。今回は「選択①選択②選択③」という3つの項目を用意します。

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!

COMMENT

メールアドレスが公開されることはありません。