脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

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

f:id:yuka-edu:20210608174059p:plain

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

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

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

 

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

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

 

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

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

f:id:yuka-edu:20210608181343j:plain

 

Adaloでフォーム設定の方法

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

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

Step1

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

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

f:id:yuka-edu:20210608181338j:image

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

f:id:yuka-edu:20210608181331j:image

Step3

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

f:id:yuka-edu:20210608181248j:image

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

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

f:id:yuka-edu:20210608181322j:image

Step5 
  1. Which data collection? を選択

f:id:yuka-edu:20210608181228j:image

Step6 

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

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

f:id:yuka-edu:20210608181237j:image

Step7 
  1. Fieldsを選択

f:id:yuka-edu:20210608181240j:image

Step8 

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

f:id:yuka-edu:20210608181315j:image

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

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

f:id:yuka-edu:20210608181311j:image

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

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

f:id:yuka-edu:20210608181232j:image

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

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

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

 

yuka-edu.hatenablog.com

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

f:id:yuka-edu:20210608181306j:image

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

f:id:yuka-edu:20210608181334j:image

Step13 
  1. DONEを選択

f:id:yuka-edu:20210608181255j:image

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

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

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

・・・

Preview

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

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

f:id:yuka-edu:20210608181259j:image

 

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

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

f:id:yuka-edu:20210608181252j:image

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

Step14

再度Formを開きます。

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

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

  1. Input Typeを選択

f:id:yuka-edu:20210608181302j:image

Step15

f:id:yuka-edu:20210608181243j:image

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

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

どうかな・・・

・・・

f:id:yuka-edu:20210608181343j:image

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

値を入力してみます。

f:id:yuka-edu:20210608181327j:image

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

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

f:id:yuka-edu:20210608181319j:image

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

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

まとめ

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

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

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

 

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