Sortable List Input
Overview
Widget for using a field as a sortable list input in your form in Mendix. The field will provide a list of labels that can be vertically sorted by the user. The result of the sorted list will be stored in the selected attribute, like any other input widget. The widget uses the Dnd Kit library for creating the interactive sortable list, which supports keyboard interaction. The widget supports RTL layouts.
Documentation
Mendix custom widget for using an input field that enables sorting values
Sortable List Input is a Mendix widget created by E-mergo. Use this widget to include a field as a sortable list input in your form in Mendix. The field will provide a list of labels that can be vertically sorted by the user. The result of the sorted list will be stored in the selected attribute, like any other input widget. The widget uses the Dnd Kit library for creating the interactive sortable list, which supports keyboard interaction. The widget supports RTL layouts.
This widget is hosted on GitHub. You can report bugs and discuss features on the issues page.
Disclaimer
This widget is created free of charge for Mendix developers, personal or professional. E-mergo developers aim to maintain the functionality of this widget with each new release of Mendix. However, this product does not ship with any warranty of support. If you require any updates to the widget or would like to request additional features, please inquire for E-mergo's commercial plans for supporting your widget needs at support@e-mergo.nl.
Features
Below is a detailed description of the available features of this widget.
Value attribute
Set the attribute which will hold the result of the sorted list. The result will be stored in a string attribute, concatenating the corresponding values, using the separator parameter as glue. As an example, an alphabetically sorted list of A through D will be stored in the attribute as 'A/B/C/D'.
Separator
Set the character used for separating the sorted list values.
Sorting handle
Select how the sorting interaction is provided to the user: item without handle, both item and handle, or handle only.
Label, Editability, Visibility
Set the label, editability, and visibility of the input like any other input widget.
Events: On change
Set the action to trigger when the input value is changed.
Sortable objects
Set the items for the sortable list. Choose from any data source type that returns an entity. Set the Label attribute as the entity's attribute that will be used for the display label of the sortable items. Optionally set the Value attribute to use a different entity attribute for setting up the result of the sorted list. Use this to differentiate between a label and the corresponding value (numeric or otherwise) that will be saved.
Randomize objects
Set whether the initial load of the sortable list items should be randomized.
Usage
Follow these steps to add the widget to your Mendix project:
- Download the Widget from the Mendix Marketplace in Studio Pro.
- Insert the Widget in a page.
- Configure the Widget. The Value attribute and Sortable objects are required.
- Run the app and interact with the sortable list.
- Perhaps setup microflow handling of the value attribute to parse the sorted values.
Styling
The widget is styled to blend in with the default styling of other input widgets in Mendix' Atlas UI. The widget can be styled through CSS in your project's theme styles.
- 'sortable-list-input' is the class name of the widget parent element.
- 'sortable-list-input-item' is the class name of each sortable list item.
- 'sortable-list-input-item-content' is the class name of the label of the sortable list item.
- 'drag-handle' is the class name of the drag handle in the sortable list item.
FAQ
Can I get support for this widget?
E-mergo provides paid support through standard support contracts. For other scenarios, you can post your bugs or questions in the widget's GitHub repository.
Can you add feature X?
Requests for additional features can be posted in the widget's GitHub repository. Depending on your own code samples and the availability of E-mergo developers your request may be considered and included.
Changelog
1.0.1 - 20231123
- Fixed styling for RTL layouts.
- Fixed documentation.
1.0.0 - 20231027 - Mendix 9.24.3
Initial release.