Skip to main content

 

 

 

 
Language:
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
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.

      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.

    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 Adds custom style classes to the 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 UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?