脱!教養ゼロママ

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

リストでOR条件を指定したい(Mulitiselect Dropdown)|初心者のアプリ開発|Adalo

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

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

「Adaloでは A or B or C ができない!」ので、残念に思っていました。

ですが、Adalo仲間さんに素敵なアイディアを頂いたので、

私も試してみることにしました!!

みなさまのお悩み解決の参考になれば嬉しいです。

OR条件を指定する最終的なイメージ

今日作成する画面のイメージはこんな感じ・・・

「1年生or2年生」と指定すると、

小学生の学生リストから対象の学生さんだけを一覧表示させます。

他の学年の学生さんは表示しない仕組みにします。

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

それでは、Adaloに設定してきましょう。

事前のAdaloデータ準備

今日はこちらのデータを用意しています。

学年コレクション

学年を登録しているだけのコレクションです。

生徒コレクション

生徒の名前と1.の学年のコレクションです。

Usersに「参照中の学年」プロパティ

ここは一工夫で、ログインユーザが参照中の学年情報をUsersに保存できるようにします。

《補足》

  • Mulitiselect Dropdownの基本的な使い方はこちらを参考にしてください。

最終イメージ

完成した画面では、チェックリストで学年を複数選択し、

選択した学年の生徒のみリスト表示させます。

AdaloでのOr条件設定

では、画面の設定をしていきます!

リスト画面の追加

  1. 画面左の+ボタンを選択
  2. ADD SCREEN を選択
  3. List > SimpleList を選択

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

  1. Nameを入力
  2. CREATE SCREEN を選択

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

画面が追加されました!

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

学年選択用の複数選択ドロップダウンを設定

  1. 画面左の+ボタンを選択
  2. ADD CONPONENT を選択
  3. 左下のEXPLORE MARKETPLACE を選択

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

  1. Mulitiselect Dropdown をインストール(INSTALL)

複数選択ドロップダウンが追加されます。

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

  1. Installed > Mulitiselect Dropdown を選択し画面に配置

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

いらないタイトルやボタンを消して、少し見た目を整えました。

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

  1. Mulitiselect Dropdownを選択
  2. ItemList:学年 を設定
  3. Filter: All 学年(Filterで表示項目を絞ることができます)
  4. Sorting :並び順を設定できます
  5. Maximum nuber of items :表示する項目の最大数を設定できます
  6. Item Label :ドロップダウンの一覧に表示する項目名を設定

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

Mulitiselect Dropdownの選択に応じて、ログインユーザの参照中の学年を更新設定

Mulitiselect Dropdownでチェックがオン・オフになった場合のアクションを設定します。

ログインユーザの「参照中の学年」項目に学年のチェックのオン・オフ結果を

持たせることで、生徒リストの表示内容を制御できるようにします。

チェックがオンになった時
  1. Mulitiselect Dropdownを選択
  2. Every time any item is selected > + ADD ANOTHER ACTION を選択
  3. Update > Logged in User を選択

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

  1. 参照中の学年 > Add > Current 学年

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

チェックがオフになった時
  1. Mulitiselect Dropdownを選択
  2. Every time any item is deselected > + ADD ANOTHER ACTION を選択
  3. Update > Logged in User を選択

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

  1. 参照中の学年 > Remove > Current 学年

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

おまけ・表示している名称の変更

String Overidesで表示している名称を指定できます。 なんとなくこんな感じで設定してみました。

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

リストの表示内容設定

  1. SimpleListを選択
  2. What is this a list of:生徒 を設定
  3. Filter: Logged in User の参照中の学年を設定
  4. Sorting:並び順を指定
  5. Maximum nuber of items :表示する項目の最大数を設定できます

Filterでログインユーザの「参照中の学年」を設定することで、Mulitiselect Dropdownで選択された学年に絞ったリスト表示を可能とします。

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

TitleやSubTitleを適当に設定したので、画面を動かしてみます!

画面を動かしてみる!

全学年を選択してみる

全学年を表示しました!

1年生・2年生を選択してみる

ちょっとドロップダウンとかぶっていますが、

1年生と2年生だけ表示しました!

まとめ

複数選択ドロップダウンを利用したOr条件の指定方法をご紹介しました。

ユーザに選択情報を持たせる一工夫で、割と使いやすい機能ができたんじゃないかなぁ〜と思っております。

何かお役に立てる情報があると嬉しいです。

他にも良いアイディアがあれば、教えてください。

最後までご覧いただき、ありがとうございました。

▽ NoCodeアプリ Adalo

www.adalo.com