Custom Dropdown

Content Type: Widget
Categories: Data

Overview

This widget allows you to fully customize the behaviour of the dropdown widget from within Mendix. Microflows can be set to determine exactly what should happen on select/create/clear actions. Having a look at the test project can be a great help understanding how everything is setup. https://github.com/mendixlabs/CustomDropdown/tree/main/tests/testProject

Documentation

https://youtu.be/e8WhGu1pufw

Known Vulnerabilities Support

CustomDropdown

A custom dropdown selection widget for Mendix. This widget allows you to fully customize the behaviour of the dropdown widget from within Mendix. Microflows can be set to determine exactly what should happen on select/create/clear actions.

Features

  • Selection
  • Searching
  • Creation (also in popup)
  • Default image avatar
  • Custom image avatar
  • Second text field on selection item
  • Custom classnames

Usage

Having a look at the test project can be a great help to understand how the widget is setup.

  1. The widget requires a non persistent helper object to function. This object must have a string attribute to store the label of each item and a string attribute to store the id(If you want to uniquely retrieve the selected object in the selection microflow later on, an unique id is required). In the test project I named this object DropdownContext.
  2. Before placing the widget on a page you should add a dataview containing this helper object for the widget.
  3. Place the widget inside this dataview.
  4. Fill the Default value property. Currently it is only possible to return lists in this datasource property, therefore make sure to return a list only containing the object you want to have as the default value. For options the same object type must be selected. Please use a microflow as retrieve the data.
  5. Fill the Options property. This will be all the selectable items in the dropdown menu. The same object type has to be selected as for the Default value. Please use a microflow as retrieve the data.
  6. Fill First label attribute and optionally the Second label and Image URL attributes.
  7. In the Events tab, specify the label and id attributes of the context object.
  8. Create an microflow that should be triggered when an item is selected in the dropdown, and set this microflow for the Select option microflow.
  9. Determine if you want to allow for creation, clearing and searching and if so also create and specify microflows for these actions.
  10. Optionally configure a nano or microflow that will be triggerd once the dropdown gets focussed.
  11. Optionally set several styling options in the styling tab. The useAvatar boolean will determine if an avatar img is shown for each item. By default an two letter icon is generated.

Test project

A test project is stored at /tests/testProject.

Issues, suggestions and feature requests

link to GitHub issues

Development and contribution

This widget has community support level.

Demo video

Can be found here.

Releases

Version: 2.5.0
Framework Version: 8.12.0
Release Notes: - making sure options are loaded correctly in some edge cases Big thanks to @NammNguyen for this contribution!
Version: 2.4.0
Framework Version: 8.12.0
Release Notes: - Added a force refresh of default option when the context object changes. Big thanks to @NammNguyen & @BananiMendix for this contribution!
Version: 2.3.0
Framework Version: 8.12.0
Release Notes: - Add dynamic classes to the default value and/or options, for example to mark various options and/or the default value as favorites. - Refresh the data source microflow to allow advanced filtering in the microflow. - Updated dependencies Big thanks to @GDKMaartenKroneman for developing these new features!
Version: 2.2.0
Framework Version: 8.12.0
Release Notes: - New (server side) pagination functionality, big thanks to @BananiMendix & @dtitenko for developing this new feature! - Fixed deprecation warning in mx 9 - Updated dependencies
Version: 2.1.0
Framework Version: 8.12.0
Release Notes: - added loading state - upgrade react-select to 4.3.1
Version: 2.0.0
Framework Version: 8.12.0
Release Notes: - fix for mendix 9.2.0 - the attributes of both the defaultValue as the options datasource now have to be configured
Version: 1.0.0
Framework Version: 8.12.0
Release Notes: A custom dropdown selection widget for Mendix. This widget allows you to fully customize the behaviour of the dropdown widget from within Mendix. Microflows can be set to determine exactly what should happen on select/create/clear actions.