フォーム画面を作ってみる｜初心者のアプリ開発｜Adalo

アプリ画面からデータを登録できないと不便ですよね。

今日はフォーム画面を用意して、アプリからデータを登録できるようにする方法を紹介します〜。 

お問い合わせフォームにも活用できるので、参考になれば嬉しいです♡

この記事を読むとわかること・・・

・フォーム画面の作成方法

今日のできあがりイメージ・・・

最後には入力項目が並んで、ボタン一つでデータを登録できるようになります。

Adaloでフォーム設定の方法

さっそく、フォーム画面を用意していきます〜！

今日は、前回まで作成してきた「レッスン日誌」の登録フォームを作成します。

Step1

標準のフォーム画面を使用して設定していきます！

1. 画面左上の 「+」を選択
2. ADD SCREEN を選択
3. SimpleのFormを選択

Step2 

1. 画面名を編集
2. CREATE SCREENを選択

Step3

右上に画面が追加されました〜！

フォームの中身がまだ空っぽなので、引き続き設定していきます。

Step4

1. 右側のフォームを選択
2. 左側のFormを選択

Step5 

1. Which data collection? を選択

Step6 

データ・コレクションの一覧が表示されます。

今日は「レッスン日誌」を選択します。

Step7 

1. Fieldsを選択

Step8 

見た目を少し修正します。

• フォームに不要な項目は右端のゴミ箱アイコンで消せます。
• ドラッグで並び順が自由に変更できます。

Step9

Fieldsの左下をさらに下にドラッグすると、自動編集項目が出てきます。

• 生徒には自動的にログインユーザを編集する設定がされていました。

Step10

登録ボタンも修正できます。

• Textのボタン名を編集できます。
• ボタンクリック時のアクションもここで追加できます。

Step11

登録画面を表示できるよう、一覧画面にリンクを設定します。

ちょうど良い「＋」ボタンが標準のリスト画面にありました。

yuka-edu.hatenablog.com

1. 右下の「＋」ボタンを選択
2. + ADD ACTION を選択

Step12 

1. Linkを選択
2. 新しく追加した登録画面名を選択 

Step13 

1. DONEを選択

これで設定ができました〜！

では、プレビューをしてみます・・・

無事に表示されるか・・・ドキドキ

・・・

Preview

レッスン日誌の一覧画面を表示しました。

右下の「＋」ボタンを選択します・・・

登録画面を表示できました！・・・が、

なんか枠からはみ出してる・・・涙

仕方がないので、体裁を整えましょう。

Step14

再度Formを開きます。

枠線の高さを広げて、、、

あれ？複数行の表示設定や必須項目の設定変更を忘れてました！ 

1. Input Typeを選択

Step15

• Input TypeをMulti-line にすると複数行入力できます。
• Required Error Text がオンの場合、必須項目です。

preview2

体裁を整え、気を取り直して再度プレビュー！

どうかな・・・

・・・

無事、登録画面が表示できました〜

値を入力してみます。

登録ボタンを選択すると・・・

元の一覧画面に戻りました！

今作ったばかりのレッスン日誌も表示されています！

ログインユーザ情報も自動的に編集されました。 

まとめ

フォームは設定箇所が多くて、画面の見た目は細かな調整が必要です。

でも、自分で１からフォーム画面を作ると考えると、感覚的にできて簡単です。

画面の見た目をこだわりだすと、ノーコードだと大変になっちゃうのかもしれません。

これで、アプリから登録ができるようになったので、データ準備が楽になりました〜。

▽ NoCodeアプリ Adalo

www.adalo.com