こんにちは。ゆかゆかです。
「Adaloでは A or B or C ができない!」ので、残念に思っていました。
ですが、Adalo仲間さんに素敵なアイディアを頂いたので、
私も試してみることにしました!!
みなさまのお悩み解決の参考になれば嬉しいです。
OR条件を指定する最終的なイメージ
今日作成する画面のイメージはこんな感じ・・・
「1年生or2年生」と指定すると、
小学生の学生リストから対象の学生さんだけを一覧表示させます。
他の学年の学生さんは表示しない仕組みにします。
それでは、Adaloに設定してきましょう。
事前のAdaloデータ準備
今日はこちらのデータを用意しています。
学年コレクション
学年を登録しているだけのコレクションです。
生徒コレクション
生徒の名前と1.の学年のコレクションです。
Usersに「参照中の学年」プロパティ
ここは一工夫で、ログインユーザが参照中の学年情報をUsersに保存できるようにします。
最終イメージ
完成した画面では、チェックリストで学年を複数選択し、
選択した学年の生徒のみリスト表示させます。
AdaloでのOr条件設定
では、画面の設定をしていきます!
リスト画面の追加
- 画面左の+ボタンを選択
- ADD SCREEN を選択
- List > SimpleList を選択
- Nameを入力
- CREATE SCREEN を選択
画面が追加されました!
学年選択用の複数選択ドロップダウンを設定
- 画面左の+ボタンを選択
- ADD CONPONENT を選択
- 左下のEXPLORE MARKETPLACE を選択
- Mulitiselect Dropdown をインストール(INSTALL)
複数選択ドロップダウンが追加されます。
- Installed > Mulitiselect Dropdown を選択し画面に配置
いらないタイトルやボタンを消して、少し見た目を整えました。
- Mulitiselect Dropdownを選択
- ItemList:学年 を設定
- Filter: All 学年(Filterで表示項目を絞ることができます)
- Sorting :並び順を設定できます
- Maximum nuber of items :表示する項目の最大数を設定できます
- Item Label :ドロップダウンの一覧に表示する項目名を設定
Mulitiselect Dropdownの選択に応じて、ログインユーザの参照中の学年を更新設定
Mulitiselect Dropdownでチェックがオン・オフになった場合のアクションを設定します。
ログインユーザの「参照中の学年」項目に学年のチェックのオン・オフ結果を
持たせることで、生徒リストの表示内容を制御できるようにします。
チェックがオンになった時
- Mulitiselect Dropdownを選択
- Every time any item is selected > + ADD ANOTHER ACTION を選択
- Update > Logged in User を選択
- 参照中の学年 > Add > Current 学年
チェックがオフになった時
- Mulitiselect Dropdownを選択
- Every time any item is deselected > + ADD ANOTHER ACTION を選択
- Update > Logged in User を選択
- 参照中の学年 > Remove > Current 学年
おまけ・表示している名称の変更
String Overidesで表示している名称を指定できます。 なんとなくこんな感じで設定してみました。
リストの表示内容設定
- SimpleListを選択
- What is this a list of:生徒 を設定
- Filter: Logged in User の参照中の学年を設定
- Sorting:並び順を指定
- Maximum nuber of items :表示する項目の最大数を設定できます
Filterでログインユーザの「参照中の学年」を設定することで、Mulitiselect Dropdownで選択された学年に絞ったリスト表示を可能とします。
TitleやSubTitleを適当に設定したので、画面を動かしてみます!
画面を動かしてみる!
全学年を選択してみる
全学年を表示しました!
1年生・2年生を選択してみる
ちょっとドロップダウンとかぶっていますが、
1年生と2年生だけ表示しました!
まとめ
複数選択ドロップダウンを利用したOr条件の指定方法をご紹介しました。
ユーザに選択情報を持たせる一工夫で、割と使いやすい機能ができたんじゃないかなぁ〜と思っております。
何かお役に立てる情報があると嬉しいです。
他にも良いアイディアがあれば、教えてください。
最後までご覧いただき、ありがとうございました。
▽ NoCodeアプリ Adalo