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 Tags

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The Dropdown Tags UI Pattern offers multiple choice options to the user when when using a dropdown search.

    How to use the Dropdown Tags UI Pattern

    In this example, we create a dropdown tags search for a list of application users and a message that displays the number of selected items.

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

      The Dropdown Tags 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 User entity.

      The GetUser aggregate is automatically created.

    5. Return to your screen by double-clicking the screen name, select the Dropdown Tags 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 the number of items as they are selected.

      CurrentList.Length

    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 result of this example should look something like the following:

    Properties

    Property Description
    ItemList (DropdownItem List): Mandatory List of items to show in the dropdown.
    SelectedItemsList (DropdownItem List): Optional Use this parameter to set preselected items.
    IsRemoveItems (Boolean): Optional If True, the option to remove items is enabled. This is the default. If False, the option to remove items is disabled.
    IsDisabled (Boolean): Optional If True, the dropdown search option is disabled. If False, the dropdown search is enabled. This is the default.
    SearchPrompt (Text): Optional Text to display on the search prompt/placeholder. "Search" is the default value.
    NoResultsText (Text): Optional Text to display on the search prompt/placeholder. "No results found" is the default value.
    AdvancedFormat (Text): Optional Allow for more options beyond what's provided through the inputs. Default value is {}.

    Example

    {"searchEnabled": false}.

    For more information, visit: Choices library.

    You can also use fuse.js options to change the search configuration. For more information about configurations, visit: Fuse

    ExtendedClass (Text): Optional Add custom style classes to the Dropdown Tags 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 Tags UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Dropdown Tags UI styles being applied.
    • Was this article helpful?