脱!教養ゼロママ

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

MENU

複数選択できる場合のフォームを設定してみる|初心者のアプリ開発|Adalo

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

こんにちは!ゆかゆかです。

 

フォームを用意していて、複数選択をお願いしたい場合ってありますよね。

今日は複数選択可能なフォームを考えてみたいと思います!

 

リレーション項目で複数選択を可能な設定をして、

標準のフォームコンポーネントを使って入力する場合、リストから選択できず、

テキスト入力しないといけないです。。

 

↓こういった設定をしていると・・・

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

 

↓テキスト入力でしか入力できない〜!

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

 

テキスト入力以外で、複数選択項目をフォームで入力する方法を考えてみます。

 

 

1.項目の設定から見直す

まずは、項目の設定から変更してしまう方法です。

Toggle項目にしてしまう

もし、選択項目が固定されているのであれば、

True/False 項目を用意してあげればいいかと思います。

 

データコレクション設定

写真ジャンルを別コレクションではなく、

写真コレクションの中に項目として用意します。

まずは、項目の設定から変更してしまう方法です。

 

  1. 選択してもらいたい項目をTrue/False 項目として用意

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

 

動かしてみる

フォーム画面ではチェック項目として表示されます。

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

 

2.段階的に入力を促す

次に項目の設定は変更せず、段階的に入力を促す方法を設定してみます。

 

リストを使う

リストで選択してから、フォームで他の項目を入力してもらいます。

今回は写真ジャンルを選択してから、写真を投稿する設定をしてみます。

 

リストの設定
  1. リストを配置
  2. What is this a list of? > 写真ジャンル(リストの対象)を選択

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

 

リストから項目を選択した時の画面遷移
  1. + ADD ACTION を選択
  2. Link > 写真投稿画面(次の画面)を選択

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



写真を登録時にジャンルを編集
  1. フォームを配置・選択
  2. + ADD ANOTHER ACTON を選択
  3. Update > New 写真(フォームで作成したデータ) を選択 

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

 

Updateの詳細設定
  1. 写真ジャンルを選択
  2. Add > Current 写真 ジャンル を選択

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

Updateのタイミングで前の画面で選択した値を編集します。

 

動かしてみる

「家族」を選択してみます。

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

 

写真を投稿します。

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

 

写真のジャンルが設定されました!

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

 

選択リストを使う

少々面倒ですが、オリジナルのフォームを作ってみました。

 

コンポーネントを配置

ADD COMPONENT > Forms & Fields から

Doropdown Menu と Image Picker を配置しました。

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

 

選択リストを設定
  1. Doropdown Menuを選択
  2. Menu Options > 写真ジャンル(選択して欲しい項目)を設定

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

 

ボタンを設定
  1. ボタンを配置・選択
  2. + ADD ACTION を選択
  3. Create > 写真 を選択

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

 

写真で登録したい画像は Image Picker コンポーネントで選択された画像です。

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

 

写真を登録時にジャンルを編集
  1. フォームを配置・選択
  2. + ADD ANOTHER ACTON を選択
  3. Update > New 写真(フォームで作成したデータ) を選択 

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

Updateの詳細設定
  1. 写真ジャンルを選択
  2. Add > Other Components  を選択

Other Components は画面の中にあるコンポーネントを意味します。

Doropdown Menu を他の画面にも置いてあるので、複数個出てきています。

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

 

  1. Add selected 写真ジャンル(画面に配置したDoropdown Menu )が選択できたことを確認
  2. DONE を選択

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

これもUpdateのタイミングで写真ジャンルを編集してみました。

動かしてみる

ジャンルは「旅行」を選択してみました。

ボタンを押して保存します。

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

 

写真ジャンルが編集できました!

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

 

まとめ

複数選択できるリレーションでも、テキスト入力しない方法を考えてみました。

もっといい案を考えてみます。

 

少しでも参考になると嬉しいです。

 

▽ NoCodeツール Adalo 無料でかなり使えます!

www.adalo.com