The Custom Dropdown Widget is a dynamic select input that can fetch options from an API or use a static list. It supports single or multiple selections, value binding, and dynamic population of the selected object.
This widget is designed for scenarios where dropdown options are dynamic or API-driven:
Dynamic Options: Fetches data from a REST API endpoint using a dataset configuration (url + dataField).
Single or Multiple Selection: Controlled via the multiple property.
Bind Selected Value:
bindValue empty → returns the full selected object.bindValue set → returns only the specified property of the selected item.Validation:
required: Ensures a value is selected when the field is mandatory.| Prop | Type | Description |
|---|---|---|
label |
string | Field label |
placeholder |
string | Placeholder text |
bindLabel |
string | Field of the option to display in the dropdown |
bindValue |
string | Field of the option to bind as value (empty string returns full object) |
multiple |
boolean | Allows selecting multiple items |
options |
array | Static options list (optional if using dataset) |
dataset |
object | Dynamic API config: { url, dataField } |
useBaseUrl |
boolean | Determines if the request uses the app’s base URL |
required |
boolean | Marks the field as mandatory |
Complete JSON Object
{
"key": "InputKey",
"type": "customdropdown",
"props": {
"label": "Input Name",
"required": true,
"placeholder": "Input Placeholder",
"bindLabel":"description",
"bindValue":"",
"multiple":false,
"options":[],
"useBaseUrl":true,
"dataset":{
"url":"https://example/categories"
"dataField":"data.content",
}
},
"validation": {
"messages": {
"required": "Error message for required"
}
}
}
Note: Setting the bindValue to empty string will return object of selected item which is preferred for dynamic Drop down field.
Allowed Custom Properties
Allowed Validations
validator-(n)