Select
This field selects an option from a list of options.
Display type
- select
Field properties
| Name | Description |
|---|---|
| displayType | The displayType for this field (select) |
| displayName | The display name used for this field |
| options | The list of available options for the field |
| value | The value used by this field |
| placeholder | The hint value used for this field |
| isDisabled | Marks the field as disabled |
| isReadonly | Marks the field as readonly |
Config
The configuration defines how to load dropdown options for the select field. Use this to load options from remote api and configure its behaviour.
| Name | Description |
|---|---|
| url | The api endpoint to load dropdown options |
| pathParams | The path parameters of the url. Use this for dynamic path parameters |
| queryParams | List of query parameters. Use this for dynamic query parameters |
| requestType | Represents HTTP method used for url. Options are get, post, put, delete. If none is specified and url key is present, then default value is get |
| requestBody | A JSON payload. Parameters are representes as $0, $1 and so forth. Parameters are 0 indexed. |
| requestBodyParams | List of parameter values of request body. Each index value in the requestBodyParams represents the same index parameter form requestParams |
| valueKey | The key from the response for value of the field |
| labelKey | The key from the response for display name of the field |
| responseKey | The key from response which contains the results |
| lazy | Load options lazily. For example: load the options on opening dropdown |
Common Properties
Click here to go to common properties
Basic example
Schema
{}
fields]
:
[0}
:
{name
:
"name"
meta}
:
{displayName
:
"Fruits"
displayType
:
"select"
options]
:
[0
:
{…
}1
:
{…
}2
:
{…
}Query params
Query params can be used to pass additional data as part of the api url. This data can either be hardcoded or configured to pass data dynamically from other fields.
Format of query params: It accepts an array/list of query params.
[<QUERY_PARAM1>, <QUERY_PARAM2>,...]Format of query param: It accepts name and value in list like format.
[<NAME_OF_QUERY_PARAM>, <VALUE_OF_QUERY_PARAM>]- NAME_OF_QUERY_PARAM is just a string
- VALUE_OF_QUERY_PARAM can be a hardcoded value or can reference value from another field like this:
- type: 'fieldValue' indicates the value has to be taken from another field
- ref: name of the reference field from where value can be copied
Schema example with query params
{}
fields]
:
[0}
:
{name
:
"countries"
meta}
:
{displayName
:
"Select Country"
displayType
:
"select"
value
:
"IN"
options]
:
[0
:
{…
}1
:
{…
}events}
:
{change
:
{…
}1}
:
{name
:
"states"
meta}
:
{config}
:
{lazy
:
"true"
url
:
"/api/states"
queryParams
:
[…
]responseKey
:
"data"
labelKey
:
"label"
valueKey
:
"value"
displayName
:
"Select State"
displayType
:
"select"
options
:
[]Request Body
A sample request body payload for HTTP method 'post' with request body parameters and url.
Demo
Schema example
{}
fields]
:
[0}
:
{name
:
"product1"
meta}
:
{displayName
:
"Product 1"
displayType
:
"select"
options]
:
[0
:
{…
}1
:
{…
}2
:
{…
}1}
:
{name
:
"product2"
meta}
:
{displayName
:
"Product 2"
displayType
:
"select"
options]
:
[0
:
{…
}1
:
{…
}2
:
{…
}2}
:
{name
:
"product_details"
meta}
:
{config}
:
{url
:
"https://dummyjson.com/carts/add"
urlType
:
"remote"
requestType
:
"post"
requestBody
:
{…
}requestBodyParams
:
[…
]responseKey
:
"products"
labelKey
:
"title"
valueKey
:
"total"
lazy
:
"true"
displayName
:
"Product Details"
displayType
:
"select"
options
:
[]How to load options from remote api
Schema
{}
fields]
:
[0}
:
{name
:
"countries"
meta}
:
{config}
:
{url
:
"/api/countries"
valueKey
:
"code"
labelKey
:
"name"
displayName
:
"Select Country"
displayType
:
"select"
options
:
[]