Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Mobile Apps and Reactive Web Apps

 

 

OutSystems

Dropdown Search

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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 + ")" ``
    
    ![](<images/dropdownsearch-9-ss.png>)
    
    1. 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

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Dropdown Search UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Dropdown Search UI styles being applied.
    • Was this article helpful?