You can use the Search Balloon UI Pattern to provide users with a search field and while the user searches for content, the results are simultaneously updated in a results list.
How to use the Search Balloon UI Pattern
In this use case, we create a search balloon for a list of employees.
In Service Studio, in the Toolbox, search for
The Search Balloon widget is displayed.
From the Toolbox, drag the Search Balloon widget into the Main Content area of your application's screen.
By default, the Search Balloon widget contains Icon, Input, Actions, and Answers placeholders.
Select the Input widget, and on the Properties tab, from the Variable drop-down, select New Local Variable.
Enter a name for the variable. In this example, we enter
Add a preparation action by right-clicking your screen name, and selecting Add Preparation.
Drag the relevant data to the preparation flow. In this example, we drag an Employee entity to the preparation flow.
Select the ListRecords1 widget, and on the Properties tab, from the Source Record List drop-down, select the relevant source list. In this example, we select GetEmployees.List. Additionally, we enter
1in the Start Index field.
Select the Input widget, and on the Properties tab, from the Destination drop-down, select New Screen Action.
Drag a Refresh Data node to the OnChange action flow, and in the Select Data Source window, select GetEmployees and then click OK.
Drag an Ajax Refresh node to the OnChange action flow, and in the Select Widget window, navigate and select the relevant widget. In this example, we select ListRecords1 and click OK.
Double-click the Preparation action and then double-click the GetEmployees aggregate.
Click Filters, then click Add Filter and in the Filter Condition field, enter the relevant logic and click Done. In this example, we enter the following condition:
Employee.FirstName like "%" + SearchText + "%" or Employee.LastName like "%" + SearchText + "%" or SearchText = "".
This forces the aggregate to return all records that have SearchText in the employee's name.
Double-click your screen name, select the Search Balloon Widget, right-click the Text placeholder, and select Delete.
Drag an Expression Widget to the list and enter the relevant expression value, and click Done. In this example, we enter the following:
ListRecords1.List.Current.Employee.Name + " "
This filters the list to show the employees' name.
After following these steps and publishing the module, you can test the pattern in your app.
|ExtendedClass (Text): Optional||Add custom style classes to the Search Balloon UI Pattern. You define your custom style classes in your application using CSS.
|AdvancedFormat (Text): Optional||Allows you to use more options than what is provided in the input parameters.