脱!教養ゼロママ

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

Mulitiselect Dropdownを使ってみる|初心者のアプリ開発|Adalo

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

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

「Mulitiselect Dropdownでremove出てこないんだけど・・・」

OR条件のアイディアブログにご意見いただきました〜

 

たしかに!事前準備をサラッと飛ばしたので、説明不足でした!

Mulitiselect Dropdownの設定について、じっくり説明いたします!!

 

今回は、Mulitiselect Dropdownを使ってユーザの趣味情報を更新してみます。

今日のポイント! ・更新対象は複数選択可能な関連項目を選びましょう。

 

 

データコレクション・項目の準備

今回はユーザの趣味情報を更新するので、まずは「趣味」のリストを用意します。

趣味コレクションを用意して、Nameに思いつく趣味をバババッと入力してみました。

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

ユーザにリレーション項目を作成

趣味リストができたので、ユーザが複数の趣味情報を持てるようにします。

  1. Database Collections > Users を選択
  2. Add PROPERTY を選択
  3. Relationship > 趣味(先程作ったコレクション)を選択

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

 

  1. 一番下のN対Nを選択
  2. Done を選択

最初のポイントにも書きましたが、ここで趣味を複数件選択できるようにしてくださいね。

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

  1. SAVEを選択

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

 

Mulitiselect Dropdownの設定

データの準備ができたので、Mulitiselect Dropdownを設定していきます!

 

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

もし、インストールがまだの場合は、マーケットプレースからインストールをしてください。

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

 

  1. Item List > 趣味 を選択(最初に作ったリスト用のコレクション)

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

趣味を選択した時の動き

  1. Every time any item is selected > ADD ACTION を選択

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

※他の項目は必要に応じて設定してください。

  • Sorting:並び順を選択
  • Maximum number of items:必要に応じてリストの最大表示件数設定
  • Item Label:リスト表示したい項目を選択

 

  1. Update > Logged in User を選択

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

 

  1. 趣味sを選択

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

 

  1. Add > Current 趣味 を選択 

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

 

趣味の選択を無くした時の動き

  1. Every time any item is deselected > ADD ACTION を選択

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

 

  1. Update > Logged in User を選択

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

 

  1. 趣味s を選択

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

 

  1. Remove > Current 趣味 を選択

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

画面表示設定

String Overrides の中の英語表記をお好みの表現に変更することで、

ドロップダウンリストの表示内容を変更できます。

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

 

動かしてみる

設定ができましたら、試しに操作をしてみましょう。

結果がわかりやすいよう、

ドロップダウンの下にログインユーザが選択した趣味を

表示する一覧を用意しています。

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

 

ドロップダウンで趣味を選択してみます。

選択したタイミングでUpdateがかかります。

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

 

画面下の一覧に選択した項目のリストが表示されました。

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

続いて、全ての趣味を選択してみます。

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

全ての趣味の一覧が表示されました。

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

まとめ

今回は、複数項目を選択して値を更新するだけでしたが、

複数選択を活かした検索画面も作成できます。

少しでも皆様のアイディアのお役に立てると嬉しいです。

 

 

yuka-edu.hatenablog.com

 

▽ NoCodeアプリ Adalo

www.adalo.com