The core structure includes: instanceId, label, data, item
The item property use component of dropdown-item that includes: title and value
isMultiple - The boolean values which allow you to select multiple values
isSearchable - The boolean value which will add a search bar on the top of the dropdown list
For dropdown-item component
subtitle - The subtitle for the dropdown item
Examples and code snippets
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
See the full datasource for static data in GitHub.
See the full datasource for dynamic data in GitHub.
datasources:
employees-static:
type: datasource.static
options:
data:
- id: 1
firstname: July
lastname: Nellson
position: manager
img: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
- id: 2
firstname: Karl
lastname: Fisher
position: Salesman
img: https://images.unsplash.com/photo-1591084728795-1149f32d9866?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80
- id: 3
firstname: Mary
lastname: Gomez
position: DEV
img: https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
- id: 4
firstname: John
lastname: Doe
position: Marketing
img: https://images.unsplash.com/photo-1548449112-96a38a643324?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
In this example, we will show you how you can set up your dropdown for multiple selections.
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
See the full datasource for static data in GitHub.
See the full datasource for dynamic data in GitHub.
multiple-select-dropdown (static)
multiple-select-dropdown (dynamic)
children:
- type: component.form
options:
children:
- type: component.dropdown
instanceId: dropdown-in
options:
data: =@ctx.datasources.employees-static
label: Select employees
isMultiple: true
item:
type: component.dropdown-item
instanceId: =@ctx.current.item.firstname
options:
title: =@ctx.current.item.firstname
subtitle: =@ctx.current.item.lastname
value: =@ctx.current.item.firstname
leftElement:
element: avatar
text: ''
uri: =@ctx.current.item.img
In this example, we can find the search function in our dropdown.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
Datasources:
See the full datasource for static data in GitHub.
See the full datasource for dynamic data in GitHub.
search-dropdown (dynamic)
children:
- type: component.form
options:
children:
- type: component.dropdown
instanceId: dropdown-in
options:
data: =$filter(@ctx.datasources.employees-static, function($v){$contains($string($v.firstname),$string(@ctx.components.dropdown-in.state.searchText != null ? @ctx.components.dropdown-in.state.searchText:''))})[]
label: Select employees
isSearchable: true
item:
type: component.dropdown-item
instanceId: =@ctx.current.item.firstname
options:
value: =@ctx.current.item.firstname
title: =@ctx.current.item.firstname
subtitle: =@ctx.current.item.lastname
leftElement:
element: avatar
text: ''
uri: =@ctx.current.item.img