Dropdown Search
The Dropdown Search UI Pattern offers a choice of available options that the user can search. When the available options' sort order is not clear, the Dropdown Search is especially helpful.
How to use the Dropdown Search UI Pattern
In this example, we create a dropdown search for a list of employees, and when an employee is selected, a message displays their employee Id.
-
In Service Studio, in the Toolbox, search for
Dropdown Search
.The Dropdown Search widget is displayed.
-
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 Employee entity.
The GetEmployee aggregate is automatically created.
-
Return to your screen by double-clicking the screen name, select the Dropdown Search 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 selected employee's name and their Id.
SelectedItem.Text + "( Employee ID: " + SelectedItem.Value + ")"
-
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 results from this example should look something like the following:
Properties
Property | Description |
---|---|
ItemList (DropdownItem List): Mandatory | List of items to show in the dropdown. |
SelectedItem (DropdownItem): Optional | Defines a preselected item from the dropdown list. |
IsDisabled (Boolean): Optional | If True, the dropdown search is disabled. If False, the dropdown search is enabled. This is the default. |
EmptyText (Text): Optional | Text that is displayed when no items are selected. "Select an item" is the default text. |
SearchPrompt (Text): Optional | Text that is displayed in the Search prompt/placeholder. |
NoResultsText (Text): Optional | Text that is displayed when there are no results. |
AdvancedFormat (Text): Optional | Enables more options beyond what's provided through the inputs. For more options, go to Choices library. Default value is {} . You can also use fuse.js options to change the search configurations. For more information on search configurations, see Fuse |
ExtendedClass (Text): Optional | Add custom style classes to the Dropdown Search UI Pattern. You define your custom style classes in your application using CSS. Examples
|