Skip to main content

Dropdown

The Dropdown control is very similar to dropdown control but with additional extensive properties like image support, color property, return value selection, and more.

The Dropdown control helps users to view much more details in the dropdown itself. You can view different columns of the data along with different colors as well as images with respect to each column. You easily assign a color, image, icon, and prefix text to each option.

Dropdown
Dropdown

Content

Dropdown

The Dropdown control provides two modes for data binding:

  • Manual: Enter static data manually.
  • Mapped: Bind data dynamically using connectors or controls.
  • Approve
  • Reject
  • None

You can add more.

Quick Select

Default: approve


Binding Data Options

The Dropdown accepts an array of objects in JSON format.

Static Data Option

To display static options, bind data using an array of strings or objects.

Example: Array of Strings

[  
"File",
"Folder",
"Control"
]

Example: Array of Objects

[  
{
"name": "Approve",
"description": "John@studio.com",
"value": "approve",
"color": "#26bc6a",
"image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Tick_c5Abe.svg"
},
{
"name": "Reject",
"description": "Dave@studio.com",
"value": "reject",
"color": "#FF5656",
"image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Close_jCmgk.svg"
},
{
"name": "None",
"description": "Doe@studio.com",
"value": "none",
"color": "#F5AB00",
"image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team108/content/app/images/public/Info_BCFfd.svg"
}
]

Mapped Mode

In this mode, you can bind dynamic data by mapping fields such as value, name, description, etc. The required JSON structure looks like this:

[  
{
"value": "approve",
"name": "Approve",
"description": "Approval process",
"color": "#26bc6a",
"image": "https://example.com/approve-icon.png"
},
{
"value": "reject",
"name": "Reject",
"description": "Rejection process",
"color": "#FF5656",
"image": "https://example.com/reject-icon.png"
}
]

Selection Type

You can configure the dropdown to allow either a Single or Multi selection based on your requirements.

Placeholder

Provide a placeholder text to guide the user, e.g., "Click to Select."

Here's the revised content arranged in a table format based on the structure and details from your provided information:

Mapped Options

FieldDescription
ValueThe unique identifier returned when an option is selected.
LabelThe name or title displayed for the dropdown option.
DescriptionAdditional details displayed under the label.
ColorAssign a color to each dropdown option for better distinction.
ImageAdd an image to represent each dropdown option visually.
IconAttach icons for a compact and recognizable representation.
Fallback TextText to display if no data is available for the dropdown option.

Add-ons

Add-onDescription
TooltipProvides helpful hints or extra information on hover.
DescriptionAdds descriptive text beneath options or sections.
LabelDisplays labels for specific options or sections.
Search BarAdds a search bar to quickly locate dropdown options.
PaginationEnables pagination for dropdown options.

Dropdown

Interaction

PropertyDescription
ValidationEnables input validation, such as marking the field as Required.
Read OnlyMarks the dropdown as non-editable, allowing users to view but not interact with it.
Submit DataDefines whether the dropdown's value should be submitted, with options like Always, Never, and Not when Hidden.
Maintain Searched TextRetains the search text entered by the user in the dropdown even after selection.
Others OptionAllows users to input a custom value not present in the predefined options.
Clear OptionAdds a clear button to reset the selected value in the dropdown.
EventsEnables triggering of specific actions when an interaction occurs, such as value selection.

Events

TriggerDescription
value_selectTriggered when the dropdown value is changed.

Appearance

  • Visibility: Toggle control visibility.
  • Default Theme: Apply predefined themes.
  • Border Radius (Image): Default 1rem.

Advanced

  • External CSS: Add custom styles.
  • Trigger Dependents: Invoke linked workflows.
  • Caching: Store frequently used selections.

Control Outputs

OutputDescription
{{advanceddropdown}}Captures the user-selected value from the Advanced Dropdown control.