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

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

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

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

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

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

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

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

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

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

１．項目の設定から見直す

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

Toggle項目にしてしまう

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

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

データコレクション設定

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

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

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

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

動かしてみる

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

２．段階的に入力を促す

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

リストを使う

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

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

リストの設定

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

リストから項目を選択した時の画面遷移

1. + ADD ACTION を選択
2. Link > 写真投稿画面（次の画面）を選択

写真を登録時にジャンルを編集

1. フォームを配置・選択
2. + ADD ANOTHER ACTON を選択
3. Update > New 写真（フォームで作成したデータ） を選択 

Updateの詳細設定

1. 写真ジャンルを選択
2. Add > Current 写真 ジャンル を選択

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

動かしてみる

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

写真を投稿します。

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

選択リストを使う

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

コンポーネントを配置

ADD COMPONENT > Forms & Fields から

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

選択リストを設定

1. Doropdown Menuを選択
2. Menu Options > 写真ジャンル（選択して欲しい項目）を設定

ボタンを設定

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

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

写真を登録時にジャンルを編集

1. フォームを配置・選択
2. + ADD ANOTHER ACTON を選択
3. Update > New 写真（フォームで作成したデータ） を選択 

Updateの詳細設定

1. 写真ジャンルを選択
2. Add > Other Components  を選択

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

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

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

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

動かしてみる

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

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

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

まとめ

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

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

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

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

www.adalo.com