こんにちは!ゆかゆかです
「Mulitiselect Dropdownでremove出てこないんだけど・・・」
OR条件のアイディアブログにご意見いただきました〜
たしかに!事前準備をサラッと飛ばしたので、説明不足でした!
Mulitiselect Dropdownの設定について、じっくり説明いたします!!
今回は、Mulitiselect Dropdownを使ってユーザの趣味情報を更新してみます。
データコレクション・項目の準備
今回はユーザの趣味情報を更新するので、まずは「趣味」のリストを用意します。
趣味コレクションを用意して、Nameに思いつく趣味をバババッと入力してみました。
ユーザにリレーション項目を作成
趣味リストができたので、ユーザが複数の趣味情報を持てるようにします。
- Database Collections > Users を選択
- Add PROPERTY を選択
- Relationship > 趣味(先程作ったコレクション)を選択
- 一番下のN対Nを選択
- Done を選択
最初のポイントにも書きましたが、ここで趣味を複数件選択できるようにしてくださいね。
- SAVEを選択
Mulitiselect Dropdownの設定
データの準備ができたので、Mulitiselect Dropdownを設定していきます!
- Installed > Mulitiselect Dropdown を選択し画面に配置
もし、インストールがまだの場合は、マーケットプレースからインストールをしてください。
- Item List > 趣味 を選択(最初に作ったリスト用のコレクション)
趣味を選択した時の動き
- Every time any item is selected > ADD ACTION を選択
※他の項目は必要に応じて設定してください。
- Sorting:並び順を選択
- Maximum number of items:必要に応じてリストの最大表示件数設定
- Item Label:リスト表示したい項目を選択
- Update > Logged in User を選択
- 趣味sを選択
- Add > Current 趣味 を選択
趣味の選択を無くした時の動き
- Every time any item is deselected > ADD ACTION を選択
- Update > Logged in User を選択
- 趣味s を選択
- Remove > Current 趣味 を選択
画面表示設定
String Overrides の中の英語表記をお好みの表現に変更することで、
ドロップダウンリストの表示内容を変更できます。
動かしてみる
設定ができましたら、試しに操作をしてみましょう。
結果がわかりやすいよう、
ドロップダウンの下にログインユーザが選択した趣味を
表示する一覧を用意しています。
ドロップダウンで趣味を選択してみます。
選択したタイミングでUpdateがかかります。
画面下の一覧に選択した項目のリストが表示されました。
続いて、全ての趣味を選択してみます。
全ての趣味の一覧が表示されました。
まとめ
今回は、複数項目を選択して値を更新するだけでしたが、
複数選択を活かした検索画面も作成できます。
少しでも皆様のアイディアのお役に立てると嬉しいです。
▽ NoCodeアプリ Adalo