Skip to main content




Service Studio version:


  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Use the Dropdown Widget to create drop-down lists in your Mobile and Reactive Web Apps.

    With the Dropdown Widget you can implement two types of lists:

    • Simple list with text only, when you set Options Content to Text Only. These is the most common type of lists, rendered with the <select> HTML tag. It provides native look and feel in the devices.
    • Custom list with other Widgets, when you set Options Content to Custom. Use them to build a list from, for example, images or other widgets. These lists are rendered with the <div> HTML tag.


    Name Description Mandatory Default value Observations
    Name Identifies an element in the scope where it's defined, like a screen, action, or module. Yes
    Variable Holds the value entered by the user. Yes
    List Specifies the list of records to show in the dropdown. Yes
    Options Content 'Text (Default)' content provides a native experience for selecting textual values (uses the select HTML tag). 'Custom' provides richer content with non-textual widgets (for example, images) inside the dropdown (uses the div HTML tag). Yes Custom
    Options Text Attribute of the records in the list to use as the label.
    Options Value Attribute of the records in the list to use as the identifier of the selected value. Yes
    Mandatory Boolean literal or expression that defines the obligatoriness of the widget. Yes False
    Enabled Boolean literal or expression that defines if the widget is editable. True
    Empty Text Text literal or expression displayed in the Dropdown list that represents an empty selection. By selecting this option, the variable defined holds a default value.
    Style Classes Specifies one or more style classes to apply to the widget. Separate multiple values with spaces. "dropdown"
    Property Name of an attribute to add to the HTML translation for this element. You can pick a property from the drop-down list or type a free text. The name of the property isn't validated by the platform.

    Duplicated properties aren't allowed. Spaces, " or ' are also not allowed.
    Value Value of the attribute. You can type the value directly or write expressions using the Expression Editor.

    If the Value is empty, the corresponding HTML tag is property="property". For example, the nowrap property doesn't require a value, therefore its property is nowrap="nowrap".


    Name Description Mandatory Observations
    On Change Screen action to execute, or a screen to navigate to when the value of the element changes.
    Transition Transition effect applied when navigating to another screen. By default defined at module level.
    Event JavaScript or custom event to handle.
    Handler JavaScript event handler.

    Runtime properties

    Name Description Read Only Type Observations
    Id Identifies the widget instance at runtime (HTML 'id' attribute). You can use it in JavaScript and Extended Properties. Yes Text
    Valid False when required inputs aren't present or the input value doesn't comply with the defined data type. You can override this property value when performing custom validations. Boolean
    ValidationMessage Message describing the built-in validation constraints not satisfied when 'Valid' is False. You can override this property value when performing custom validations. Text
    • Was this article helpful?