The 5.7 branch of Magnolia reached End-of-Life on December 31, 2023, as specified in our End-of-life policy. This means the 5.7 branch is no longer maintained or supported. Please upgrade to the latest Magnolia release. By upgrading, you will get the latest release of Magnolia featuring significant improvements to the author and developer experience. For a successful upgrade, please consult our Magnolia 6.2 documentation. If you need help, please contact info@magnolia-cms.com.
SelectFieldDefinition renders a dropdown list.
Class: info.magnolia.ui.form.field.definition.SelectFieldDefinition
Select field properties
Simple select field definition.
form: tabs: - name: tabLink label: Link fields: - name: listStyle class: info.magnolia.ui.form.field.definition.SelectFieldDefinition label: List style options: - name: bullet value: bullet selected: true label: Bullet - name: ordered value: ordered label: Ordered - name: inline value: inline label: Inline
Node name | Value |
---|---|
form |
|
tabs |
|
tabLink |
|
fields |
|
listStyle | |
options | |
bullet | |
label | Bullet |
selected | true |
value | bullet |
ordered | |
label | Ordered |
value | ordered |
inline | |
label | Inline |
value | inline |
class | info.magnolia.ui.form.field.definition.SelectFieldDefinition |
label | Link |
You can use all common field properties and the following.
Select, Option group and Twin-column fields follow this general configuration pattern, but also have additional properties.
Properties:
<field‑name> | required Name of field |
| required Parent node for the selectable options. |
| Name of the option. |
| required Value saved to the repository when selected. |
| 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. |
| optional Option label displayed to the user. |
| optional Pre-selects the option. |
| optional, default is Read option labels from a different property. Set to the name of your custom label node. |
| optional Path to an existing option set as opposed to defining options in the current definition. |
| optional, default is When using a |
| optional, default is By default, option labels are sorted alphabetically. When set to |
| optional, default is Read option values from a different property. Set to the name of your custom value node. |
Properties specific to the select field.
| optional, default is When When This property does not make it possible to enter new values into the field. The user can only choose from existing options. |
| Vaadin To enable filtering, you must also:
|
| optional, default is To enable paging and filtering, value must be an integer > |
Example: Filtered Select field
Example: Select field using startswith
filtering mode and pagination set to 10 options per page.
form: tabs: - name: tabAddress fields: - name: country class: info.magnolia.ui.form.field.definition.SelectFieldDefinition 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 |
class | info.magnolia.ui.form.field.definition.SelectFieldDefinition |
filteringMode | startswith |
pageLength | 10 |
textInputAllowed | true |
Here's the field in a dialog.