Select2 is an Outsystems component for your Traditional Web Apps. It is a jQuery based replacement for select boxes. It supports searching, remote data sets, infinite scrolling of results and many other highly used options.
Install this component on your environment and check the dependencies on your module. This component has available 3 web blocks : Select2, CategoryDropdown and CategoryMultiSelectDropdown ( the last two are extras that are only used in one use-case, See the separator OtherWidgets in the demo). Use these web blocks linked with your Combo Box or List Box to achieve your goal. To see use-cases and how the widgets work, please see the Demo (this demo application is also available on the forge to download).
For extra information on Select2 options (besides this demo) click here.
Instructions
1. Download and install the component
After downloading the component and managed your dependencies , you should have available 3 web blocks: Select2, CategoryDropdown and CategoryMultiSelectDropdown.
Web blocks available on this component.
2. Link the web bocks with the combo or list box widget.
These web blocks will always work on pairs with the combo box or list box. For this example drag and drop the combo box to the screen , define its sources and create a local variable to link with the widget. Name this combo box because we will need its id. (To see other features that you can obtain using this component, please check the demo page available and its respective code also available on the forge).
Drag and drop your usual combo box
Assign sources and variables as you would do for a standard combo-box.
3. Link the Select2 component to your widgets
Drag and drop the Select2 widget that you have now available, fill the elementId input with the id of the combo-box, this way you are linking the two widgets together.
Two widgets on the screen : Combo Box and Select2 web block.
Define the inputs on the Select2 web block. See more use-cases on the demo for the Class and select2Settings input parameters.