ノーコードツールAdalo
前回、ノーコードツールAdaloでText InputとButtonを使ってフォームを作ってみました。

今回はよく使うだろうコンポーネントとして、ドロップダウンメニュー(プルダウンメニュー)を作ってみようと思います。
それでは始めていきましょう。
事前準備
まずは準備をしていきます。
初期状態としてはこれまで通りデータベースとしては「Usersコレクション」のみ。

Usersコレクションには「test1」、「test2」、「test3」のユーザーが登録されています。
そしてシミュレーターで使用しているログインユーザーは「test1」です。

今回はドロップダウンメニューで選択した都市名をUsersコレクションに保存してみましょう。
ということで保存用のプロパティをUsersコレクションの中に作成します。
「+ADD PROPERTY」をクリック。

「Text」をクリック。

新しいプロパティのNameを「City」にして「SAVE」をクリック。

これで保存用のプロパティ「City」ができました。
ドロップダウンメニュー用のコレクションの作成
次にドロップダウンメニュー用のコレクションを作成していきます。
「+ADD COLLECTION」をクリック。

コレクション名は「City」として、「ADD」をクリック。

「Cityコレクション」に都市名を追加していきます。
「0 Records」をクリックし、コレクションを開きます。

「+ADD CITY」をクリック。

Nameに都市名を入れて「SAVE」をクリックします。
試しに「Tokyo」を保存してみました。

確かに「Tokyo」が追加されています。

他に「Osaka」、「Nagoya」、「Sapporo」、「Fukuoka」、「Other」を保存しておきました。

ドロップダウンメニューの配置と設定
次にドロップダウンメニューの配置と設定を行なっていきます。
左上の「+マーク」をクリックし、「Forms & Fields」内の「Dropdown Menu」をHomeスクリーン上にドラッグ&ドロップします。

「Menu Options」がこのドロップダウンで使用するコレクションの設定です。

今回はMenu Optionsに「City」コレクションを選択します。

選択すると下に色々出てきますが、今回は特に変更しません。
また慣れてきたら色々いじってみることにしましょう。
ちなみにこのドロップダウンコンポーネントの名称(ここでは「Dropdown」)を後程使用しますので、覚えておいてください。

次にドロップダウンメニューを選択し終わった後、データベースに反映させるためのボタンの配置を行います。
左上の「+マーク」をクリックし、「Button」内の「Button」をHomeスクリーン上にドラッグ&ドロップします。

左のウインドウを下にスクロールします。

「+ADD ACTIONS」をクリックして、「Update」の「Logged in User」をクリックします。

「City」プロパティの右にある「Tマーク」(マジックテキスト)をクリックします。

「Other Components」の「Dropdown」(先ほど作成したドロップダウンメニューの名前)、「Name」をクリックします。
これによりドロップダウンメニューの値を取得できます。

「DONE」をクリックします。

シミュレーターでの確認
それではシミュレーターで確認していきましょう。
右上の「PREVIEW」をクリック。

前にログインしていれば、Homeスクリーンから開始されます。
ドロップダウンメニューとボタンがあります。

ドロップダウンメニューを開くと、先ほど登録した5つの都市名+Otherが表示されました。

「Tokyo」を選択して、ボタンを押してみます。

グルグルマークがしばし表示され、それが消えると処理が完了です。
✖️マークをクリックして、シミュレーターを終了します。

ちゃんと保存されたか確認してみましょう。
「Database」の「Usersコレクション」を開きます。

「test1」の「City」に「Tokyo」と表示され、ちゃんと保存されたのが分かります。

ドロップダウンメニューはこんな感じで使用します。
次回はもう一つのチェックボックス(Adaloではトグルボタン)を試してみましょう。

ではでは今回はこんな感じで。
コメント