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.

1. In Service Studio, in the Toolbox, search for Dropdown Search.

   The Dropdown Search widget is displayed.

   

2. From the Toolbox, drag the Dropdown Search widget into the Main Content area of your application's screen.

   

3. Select and right-click your screen name, and select Fetch Data from Database.

4. 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.

   

5. 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).

   

6. Staying on the Properties tab, from the Handler dropdown, select New Client Action.

7. 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 + ")"

   

8. 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: