The Dropdown Tags UI Pattern offers multiple choice options to the user when when using a dropdown search.
How to use the Dropdown Tags UI Pattern
In this example, we create a dropdown tags search for a list of application users and a message that displays the number of selected items.
In Service Studio, in the Toolbox, search for
The Dropdown Tags widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
From the Toolbox, drag the Dropdown Search widget into the Main Content area of your application's screen.
Select and right-click your screen name, and select Fetch Data from Database.
To add a database entity, click the screen, and from the Select Source pop-up, select the relevant database entity and click OK.
In this example, we select the User entity.
The GetUser aggregate is automatically created.
Return to your screen by double-clicking the screen name, select the Dropdown Tags widget, and on the Properties tab, set the mandatory properties (ItemList, Value, Text).
Staying on the Properties tab, from the Handler dropdown, select New Client Action.
Add the relevant logic to the client action.
In this example, we add a Message to the client action and in the Expression Editor enter the following logic and click DONE. This will display the the number of items as they are selected.
You can change the Dropdown Search's look and feel by setting the (Optional) properties on the Properties tab.
After following these steps and publishing the module, you can test the pattern in your app. The result of this example should look something like the following:
|ItemList (DropdownItem List): Mandatory||List of items to show in the dropdown.|
|SelectedItemsList (DropdownItem List): Optional||Use this parameter to set preselected items.|
|IsRemoveItems (Boolean): Optional||If True, the option to remove items is enabled. This is the default. If False, the option to remove items is disabled.|
|IsDisabled (Boolean): Optional||If True, the dropdown search option is disabled. If False, the dropdown search is enabled. This is the default.|
|SearchPrompt (Text): Optional||Text to display on the search prompt/placeholder. "Search" is the default value.|
|NoResultsText (Text): Optional||Text to display on the search prompt/placeholder. "No results found" is the default value.|
|AdvancedFormat (Text): Optional||Allow for more options beyond what's provided through the inputs. Default value is
For more information, visit: Choices library.
You can also use fuse.js options to change the search configuration. For more information about configurations, visit: Fuse
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.