Searchable Selector

Category: Widgets
Subcategory: Input widgets

Overview

Mendix reference, reference set, and enumeration selector with a search bar and a clear button.

**If you are using Mendix 8.17 - 9.12**, use the following widget or check older version in the marketplace:  
https://github.com/bsgriggs/mendix8-searchable-reference-selector  

Documentation

Demo urlhttps://widgettesting105-sandbox.mxapps.io/p/searchable-reference-selector

Searchable Selector

Mendix reference, reference set, and enumeration selector with a search bar and a clear button.

If you are using Mendix 8.17 - 9.12, please use the following widget or check older version in the marketplace. (The older version does not support reference sets or enumerations)
https://github.com/bsgriggs/mendix8-searchable-reference-selector
https://marketplace.mendix.com/link/component/116917

Dropdown Reference or EnumDropdown Reference SetDropdownRefDropdownRefSetList On Page Reference or EnumList On Page Reference SetListRefListRefSet

Note: checkboxes, radio buttons, or background color settings are independent. All can be used at any time

Features

  • Dropdown or list selection for enumerations, references or reference sets
  • Can use "Max Items" setting to limit objects retrieved at once use if you encounter longer load times
  • Filtering is done by the Mendix runtime instead of the browser
  • Button to clear the selection / all selections - can be disabled
  • Button to select all the options in a reference set - can be disabled
  • Option to make the content un-searchable - allows you to show a dynamic list of checkboxes / radio buttons
  • Option to render options as checkboxes, radio buttons, or a cell
  • Option to render attribute text, HTML content, or content from Mendix
  • Option to render a reference set's values with either badges or as a comma separated list
  • Option to define your own filtering logic with a Microflow
  • Option to use either Contains or StartsWith functions
  • Ability to marked specific options as un-selectable
  • Ability to customize the icons
  • Support for arrow keys and enter key press
  • Searching auto-highlights the first record for easy selecting with the enter key

Configuration

The following settings are available for all Selection Types.
general
The label is that text next to the textbox while the placeholder is the text inside of the textbox when there is no search.

Please see the following documentation based on the Selection Type you wish to use.

Check here for more information on using manual filtering. Many of the options are removed with the expectation you will be adding the features manually in you microflow data source.

Performance Issues?

You likely have too many options trying to render at once. Here's some things to help address the problem:

  • Try using the "Max Items" setting. This will limit the amount of options available on the first render and display the "More Results Text" at the end of the list. When a user searches for something, it will still consider the options that are not rendered
  • Try limiting the data source based on what you already know. For example, if your form is for selecting McDonald's locations. Make the user select a state or country first then use that information to limit the data source.
  • Too many badges displaying when you have a reference set? Use the "Max Reference Display" setting. This will only render the first x amount of badges then include (+x) for the number of remaining selected.
  • Only use the "Selectable Attribute" if you absolutely need it. Sometimes it is better to not display a record at all (e.g. adding xpath to the data source) instead of displaying it as un-selectable.

Demo project

https://widgettesting105-sandbox.mxapps.io/p/searchable-reference-selector

Issues, suggestions and feature requests

https://github.com/bsgriggs/mendix9-searchable-reference-selector/issues

This widget is open source. Feel free to clone the GitHub repository, make whatever changes you need, and submit a pull request! **Requires Node v14 and NPM v6 - if you already have a different version of Node / NPM, then download NVM to switch between versions **

Development and contribution

Benjamin Griggs

Releases

Version: 2.2.0
Framework Version: 9.13.0
Release Notes: - improved position tracking
Version: 2.1.1
Framework Version: 9.13.0
Release Notes: - bug fix: reference set dropdown should not close on select
Version: 2.1.0
Framework Version: 9.13.0
Release Notes: - added on Leave event handler - changed styling to no longer use fixed values - simplified event handling
Version: 2.0.1
Framework Version: 9.13.0
Release Notes: bugfix: styling for radio buttons and checkboxes
Version: 2.0.0
Framework Version: 9.13.0
Release Notes: - added the ability to search and select enumerations! - renamed the widget to "Searchable Selector" since you can now select references, reference sets, and enumerations - added the ability to define your own filtering logic with a Microflow / Nanoflow (now you can filter on multiple attributes!) - improved documentation on GitHub including a [walkthrough on how to set up manual filtering](https://github.com/bsgriggs/mendix9-searchable-reference-selector/blob/master/docs/ManualFiltering.md) - added option to use either Contains or StartsWith functions (startsWith helps with performance) - the search text is now cleared when the widget losses focus (avoids looking like the searched value is the selected value) - added the ability to search without clearing the selected value first - bugfix: on-change logic can now run in parallel. If the user selects different options quickly, the former on-change activities will no longer be skipped. submit any bugs or suggestions to [GitHub](https://github.com/bsgriggs/mendix9-searchable-reference-selector/issues)