Dropdown

Allows for multi-select, search, and select values.

Use this widget to select between multiple choices, search through a large list of choices, perform multiple selections, include a header, etc. For a simpler version, use a standard Dropdown.

The dropdown widget is available under INTEGRATION > GENERAL. When designing application pages, drag-and-drop GEDropdown to a container.

The following list of properties are specific to this widget. For common properties, refer to Page Components (Classic).

Dropdown Properties

Field Name Description
Source - Dropdown Data Use any of these options to provide values from a data source to populate the dropdown.
  • Select the Query tab. Choose a query that can return dropdown values as output. Add as many output fields as required. Here's a sample query response:
    {"status":{"success":true,"code":0,"reason":"Ok"},
"result":[
{"State Data.value":"dd-historian://${his1}/KALYANMR2_Simulation.Simulation00002","State Data.key":"graduate"},
{"State Data.value":"dd-historian://${his1}/KALYANMR2_Simulation.Simulation00003","State Data.key":"school"}
],"more":false}
  • Select the Global tab. Choose an output field value that is available as a global parameter.
  • Select the Manual tab. In the text field, enter the output field value you want to pass.
  • Select the Formula tab.
    • Select Add Formula > Add text.
    • Enter the output field value in the text field.
    • Select Done to save and add the formula to the dropdown widget.
These are the two basic formats to manually enter values for a dropdown.
[
   {"key1":"abc", "value1" : "1"},
   {"key2":"def","value2":"2"},
]
(OR)
[{"key1": "value1"}, {"key2":"value2"}]
Preselect You can predefine or preselect a default value in the dropdown menu when it is initially displayed or loaded.
  • None: No default selection.
  • First: Selects the first item in the dropdown list.
  • Data: Use Data Source selection options to specify a preselect value. You can specify a string that matches the Value configured for the dropdown. This allows the dropdown plug-in to automatically preselect the corresponding option based on the provided string value.
When using a dropdown with a data source:
  • If it returns a single value, that value is used for both display and output.
  • If it returns two values, the first is used for display and the second for output. For example, if the value array is {"One", "1"}, the dropdown shows "One" and returns "1" when selected.
  • If it returns two values, you can change the default order by setting alias for the two fields to "value" or "display" (case insensitive) to define which field maps to the display and value in the dropdown.
Target - Dropdown Target Use any of these options to specify the target source for a dropdown value. At runtime, when you select a value from the dropdown, the value gets assigned to the target specified in this property.
  • Select the Query tab. Choose a query input value as target.
  • Select the Global tab. Add or choose a global value as target.
Output Format Specify whether the output value should be an array or string format.
Manual Input You can also use this property instead of using options in Dropdown Data property.
Manually create values for a dropdown widget:
  1. Select +Add Item to add a dropdown item.
  2. Enter Display Name and Value.
  3. Add as many items as required.
  4. Use and to rearrange the items order of display in a dropdown.
  5. To delete an item, select next to it.
Note: If you configured both Manual Input and Dropdown Data properties for the widget, then the dropdown is populated with a list of combined values. Make sure to validate and rectify your data to avoid duplicates in the dropdown.
Label Enter a label name that appears above the dropdown widget. For example, Choose an item
Dropdown Placeholder Enter the placeholder text that appears in the dropdown. For example, -Select-
Dropdown height (px) Set a height for the dropdown list in pixels.
Multiple selection Allows to select multiple values from a dropdown. If you select this property, specify the Output Format and Output Separator.
Max Selections Specify the maximum number of values that can be selected from the dropdown.
Enable search Select the check box to enable a search option for dropdown values.
Output Separator By default, multiple values are separated by a comma. You can also use other symbols like semicolon.
Width (px) (0 equals Dynamic) Enter a width for the dropdown. If set to 0, the widget occupies 100% of its container, and fills the area in the application.