Select field - 5 UI
Deprecated
This select field definition has been deprecated since Magnolia 6.0. It is part of the Magnolia 5 UI framework. For the updated implementation, see Select field for Magnolia 6 UI instead. |
SelectFieldDefinition
renders a dropdown list.
class: info.magnolia.ui.form.field.definition.SelectFieldDefinition
fieldType: select
Example select field definition
form:
tabs:
- name: tabLink
label: Link
fields:
- name: listStyle
fieldType: select
label: List style
options:
- name: bullet
value: bullet
selected: true
label: Bullet
- name: ordered
value: ordered
label: Ordered
- name: inline
value: inline
label: Inline
Referencing fields shortcut info - 5 UI
See Referencing fields for further information.
Common select field properties - 5 UI
The select, option group and twin-column fields share this general configuration pattern, but they also have their own additional properties.
<field name>
required
Name of the field.
options
optional
Parent node for the selectable options. If not set, the field generates options from the repository path.
<option name>
Name of the option.
value
required
Value saved to the repository when selected.
name
optional, default is the parent node name
Name of the node where the selected value is stored. If not set, the name of the parent node is used.
label
optional
Option label displayed to the user.
iconSrc
optional
Displays an image next to the option. Value is a path to the image.
selected
optional, default is false
Pre-selects the option.
labelProperty
optional, default is `label`
Reads option labels from a different property. Set to the name of your custom label node.
path
optional
Path to existing options as opposed to defining options in the current definition. Only valid with a field defined in XML.
Alternatively, option definitions can be placed in a YAML file
referenced via include
.
repository
optional, default is `RepositoryConstants.CONFIG`
When using a path to existing options, workspace to look in.
sortOptions
optional, default is true
By default, option labels are sorted alphabetically. When false
, sorts
the options by JCR node order.
comparatorClass
optional, default is `info.magnolia.ui.form.field.factory.SelectFieldFactory.DefaultOptionComparator`
When sortOptions
set to true
, sorts the available options.
valueProperty
optional, default is value
Reads option values from a different property. Set to the name of your custom value node.
Additional properties
Property | Description | ||
---|---|---|---|
|
optional, default is When When
|
||
|
optional, default is `off` Vaadin
|
||
|
optional, default is To enable paging and filtering, value must be an integer greater than
|
See also Common field properties.
Filtered select field
Here is an example select field that uses the startswith
filtering
mode and 10 options per page.
YAML file JCR node
form:
tabs:
- name: tabAddress
fields:
- name: country
fieldType: select
label: Country
filteringMode: startswith
pageLength: 10
textInputAllowed: true
options:
- name: afghanistan
value: afghanistan
- name: argentina
value: argentina
- name: australia
value: australia
- name: austria
value: austria
- name: belgium
value: belgium
- name: brazil
value: brazil
- name: bulgaria
value: bulgaria
- name: canada
value: canada
- name: chad
value: chad
- name: chile
value: chile
- name: china
value: china
- name: cuba
value: cuba
- name: czech-republic
value: czech-republic
- name: denmark
value: denmark
Node name | Value |
---|---|
form |
|
tabs# |
|
tabAddress# |
|
fields# |
|
country# |
|
options# |
|
afghanistan# |
|
value# |
afghanistan |
argentina# |
|
value# |
argentina |
australia# |
|
value# |
australia |
austria# |
|
value# |
austria |
belgium# |
|
value# |
belgium |
brazil# |
|
value# |
brazil |
bulgaria# |
|
value# |
bulgaria |
canada# |
|
value# |
canada |
chad# |
|
value# |
chad |
chile# |
|
value# |
chile |
china# |
|
value# |
china |
cuba# |
|
value# |
cuba |
czech-republic# |
|
value# |
czech-republic |
denmark# |
|
value# |
denmark |
fieldType# |
select |
filteringMode# |
startswith |
pageLength# |
10 |
textInputAllowed# |
true |