Give us feedback
multiselect-reactandmob
Reactive icon

Multiple Selection Dropdown (ReactAndMob)

Stable version 1.9.1 (Compatible with OutSystems 11)
Uploaded on 10 Aug by 
Chris Stacey
4.5
 (12 ratings)
multiselect-reactandmob

Multiple Selection Dropdown (ReactAndMob)

Details
Multiple selection dropdown menu widget for Reactive Web and Mobile. All text is customisable. All text is optional, except the 'This list is empty' and 'No matches found' texts. Add your own metadata to each item in the dropdown menu (for easy access later, without re-fetching from the database). Parameters offer fine grained control over the behaviour and look of the widget. See demo for more details and examples.
Read more

Multiple selection dropdown menu widget for Reactive Web and Mobile

  • all text is customisable
  • all text is optional, except the 'This list is empty' and 'No matches found' texts
  • add your own metadata to each item in the dropdown menu
    (for easy access later, without re-fetching from the database)
  • option to control dropdown menu width and height
  • option to display list of user selections inside the dropdown bar
  • option to display count of user selections inside the dropdown bar
  • option to switch from list of user selections to count of selections after n items are selected
  • option to choose, per item, whether user can edit the item (i.e. select/de-select)
  • option to add a 'select all' checkbox
  • option to add the number of items to be selected to the label of the 'select all' checkbox
  • option to add a search tool
  • option to have the search tool remain visible at the top of the menu, while scrolling
  • option to add a 'select all search results' checkbox
  • option to add the number of items to be selected to the label of the 'select all search results' checkbox
  • option to return list containing user selected items only, or return whole list
  • option to keep menu open when user click away from widget
  • option to keep menu open, but only when user clicks on another MultiSelect_ReactAndMob widget
  • option to limit number of user selected items
  • option to have dropdown menu open on load
  • option to have dropdown menu "push" other content down the page when open
  • option to add a clear selection icon to the dropdown bar - removes all selections


Example use case for Metadata fields:

Often the data the user makes their selection on (eg. City Names) is different to the date the app actually needs (eg. Entity Ids, Postcodes, Country).

Using the metadata fields allows you to keep the related information with the user selections so when the list of selections is returned to the parent context it does not have to perform another Aggregate etc. to get the data it actually needs.


Many thanks to @Bram Verlinden, @Nuno Rodrigues for testing and feedback, and @Soren Staun for providing feedback and suggesting the count of selected items feature!

Many thanks to @Michael111 for suggesting the user cannot edit item feature!

Release notes (1.9.1)

Please Note: The project's name HAD to be shortened in version v1.6.2 (due to OutSystems changes)

--------------------------------------------------------------------------------


WARNING, IF UPGRADING VERSIONS

  • WILL NEED TO UPDATE THE LABELS FOR the "Select All" and "Select All Results" checkboxes (assuming you have them enabled - the default)

    The structure of the "Select All" and "Select All Results" checkbox labels has changed.
    Previously they were: a Placeholder, and an optional number (surrounded by parenthesis).
    Now they are: a Placeholder, an optional number (without parenthesis), and the new Placeholder.


  • If you prefer your app to remain looking exactly the same: upgrade, then open the MultiSelect_ReactAndMob module in Service Center, to search each Consumer listed in the Dependencies tab - for the text "MultiSelect_ReactAndMob\MultiSelect_ReactAndMob"
    For each widget:
    • Update the labels as described in Appendix A


Bugs Fixed

  • Fixed a CSS Bug where the "Select All" and "Select All Results" labels were right aligned, when the widget was placed into an ancestor CSS context containing "text-align: right".
  • Fixed a bug: the number of items to be (de)selected (part of the "Select All" and "Select All Results" checkbox labels), did not account for disabled list items - which cannot be selected.
  • Fixed a CSS bug where icons added into the dropdown bar Placeholder were being displayed using block layout, rather than inline.


Features Added

  • Added new placeholder: allowing extra flexibility in the "Select All" and "Select All Results" labels
  • Added option: Limit the number of selected items


Changes to demo page

  • Added an icon to "NothingSelectedText" and "AllSelectedText" Placeholders, to demonstrate the advantage of a Placeholder over a normal text parameter.
  • You may need to update Service Studio before you can update the demo




Appendix A - Updating the "Select All" and "Select All Results" checkbox labels


The structure of the "Select All" and "Select All Results" checkbox labels have changed.


Previously:

The labels were comprised of TWO optional parts:

Part 1 - Placeholder
             (eg. "SelectAllCheckboxText" placeholder)

Part 2 - number of items to (de)select, in parenthesis, with a leading space.
             (eg. "Menu_AddSelectAllNumber" parameter)


This allowed text like "Select All", and with the optional number added, "Select All (500)".


Now:

The labels are comprised of THREE optional parts:

Part 1 - Placeholder
             (eg. "SelectAllCheckboxText" placeholder)

Part 2 - number of items to (de)select, WITHOUT parenthesis, OR a leading space.
             (eg. "Menu_AddSelectAllNumber" parameter)

Part 3 - Placeholder
             (eg. "SelectAllCheckboxText2" placeholder)

Which provides more flexibility.
BUT, the upgrade means YOU WILL NEED TO update the values in the placeholders!


Example 1:

If you previously had:

Part 1 = "Select All"
Part 2 = " (500)"                          (i.e. old result of "Menu_AddSelectAllNumber = True")

Label = "Select All (500)"

Now you'll have:

Part 1 = "Select All"                    (i.e. existing placeholder value)
Part 2 = "500"                             (i.e. new result of "Menu_AddSelectAllNumber = True")
Part 3 = ")"                                  (i.e. new placeholder default value)

Label = "Select All500)"

Therefore, you would need to update Part 1 to "Select All (" so that:

Label = "Select All (500)"


Example 2:

If you previously had:

Part 1 = "Select All"
Part 2 = ""                                   (i.e. the result of "Menu_AddSelectAllNumber = False")

Label = "Select All"

Now you'll have:

Part 1 = "Select All"                    (i.e. existing placeholder value)
Part 2 = ""                                   (i.e. the result of "Menu_AddSelectAllNumber = False")
Part 3 = ")"                                  (i.e. new placeholder default value)

Label "Select All)"

Therefore, you would need to update Part 3 to "", so that:

Label = "Select All"

License (1.9.1)
BSD-3 license (https://opensource.org/licenses/BSD-3-Clause)
Reviews (9)
by Pieter Swart
8 Jul
in version 1.7.1
Great component for complex filter dialogs. Love the documentation, attention to detail, quick support and the demo which allows you to test behavior without having to create little test programs for each new scenario.
by Mohammad Mirza
30 May
in version 1.7.1
I find this extension overcomplicated, its difficult to understand how make use of it. The documentation and the demo is just bloated. 
Answer from the owner
23 Aug
in version 1.7.1
Hi Mohammad,
Thanks for the feedback!
Based on this, the demo UI has been updated to (hopefully) be clearer,
and a few tips have been added to the demo code - directing devs toward simpler examples first.
I hope this helps.
Chris
by David Ferreira
2022-11-30
in version 1.6.2
Really well done, works has intended and even the documentation/support is really good. Also it's easy to understand how is built in case you need to do some customizations.
More from Chris Stacey