Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Search Balloon

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

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

      The Search Balloon widget is displayed.

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

    3. Select the Input widget, and on the Properties tab, from the Variable drop-down, select New Local Variable.

    4. Enter a name for the variable. In this example, we enter SearchText.

    5. Add a preparation action by right-clicking your screen name, and selecting Add Preparation.

    6. Drag the relevant data to the preparation flow. In this example, we drag an Employee entity to the preparation flow.

    7. 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 1 in the Start Index field.

    8. Select the Input widget, and on the Properties tab, from the Destination drop-down, select New Screen Action.

    9. Drag a Refresh Data node to the OnChange action flow, and in the Select Data Source window, select GetEmployees and then click OK.

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

    11. Double-click the Preparation action and then double-click the GetEmployees aggregate.

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

    13. Double-click your screen name, select the Search Balloon Widget, right-click the Text placeholder, and select Delete.

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

    Properties

    Property Description
    ExtendedClass (Text): Optional Add custom style classes to the Search Balloon UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Search Balloon UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the Search Balloon UI styles being applied.
    AdvancedFormat (Text): Optional Allows you to use more options than what is provided in the input parameters.

    Example

    • { arrow: false, showOnInit: true }
    For more information, see https://atomiks.github.io/tippyjs/.
    • Was this article helpful?