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.
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 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||Adds custom style classes to the 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.