Multivalue field - 5 UI
Deprecated
This multivalue field definition has been deprecated since Magnolia 6.0. It is part of the Magnolia 5 UI framework. For the updated implementation, see Multi field for Magnolia 6 UI instead. |
MultiValueFieldDefinition
renders multiple fields that allow the user to either enter multiple
values such as items in a shopping list or select multiple items such as
categories for tagging content. The multivalue field saves the entered
values as a LinkedList<T>
collection by default. You can save them in
a different way by using a
multivalue
property transformer.
class:
info.magnolia.ui.form.field.definition.MultiValueFieldDefinition
fieldType: multiValue
Example multivalue field definition
form:
tabs:
- name: tabMain
label: Categories
fields:
- name: selectCategories
fieldType: multiValue
label: Select category
field:
name: linkField
class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
targetWorkspace: category
appName: categories
identifierToPathConverter:
class: info.magnolia.ui.form.field.converter.BaseIdentifierToPathConverter
Referencing fields shortcut info - 5 UI
See Referencing fields for further information.
Multivalue field properties
Property | Description |
---|---|
|
required Name of the field. |
|
required Parent node for the nested child field. Must be named |
|
required Child field definition class.
Any other nodes and properties supported by the child field definition class. Any required properties must be added. |
|
optional, default is Button label for adding fields. |
|
optional, default is Button label for removing fields. |
|
optional, default is Property transformer class. Defines how the values are stored in the repository. |
See also Which transformer should I use?
See also Common field properties.
- Best practice
-
Use
DelegatingMultiValueTransformer
when nesting more than two levels of fields. The other multivalue transformers can only handle a maximum of two levels.
Multivalue containing a single field
Here is an example of a multivalue field that contains a single text field. The parent shopping list is the multivalue field, and the list items are text fields.
In configuration, define the parent multivalue field first, then add a
field
node and define the child field’s properties under it.
YAML file JCR node
form:
tabs:
- name: tabMain
label: Main
fields:
- name: shoppingList
fieldType: multiValue
label: Shopping list
field:
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
label: Title
Node name | Value |
---|---|
form |
|
tabs# |
|
tabText# |
|
fields# |
|
shoppingList# |
|
field# |
|
class# |
info.magnolia.ui.form.field.definition.TextFieldDefinition |
label# |
Title |
fieldType# |
multiValue |
label# |
Shopping list |
Multivalue containing a composite field
Here is an example event list. The parent list is a multivalue field. Each event is a composite field that consists of a text field and a date field.
Note how
NoOpCompositeTransformer
is used to prevent the composite field from saving the field values.
NoOpCompositeTransformer
hands the responsibility of saving values to
the multivalue parent. The default transformer for the multivalue field
is
MultiValueTransformer
.
However, here we cannot use it because it would store the child values
in one multivalue property that looks like a comma-separated list. That
single property is bound to a single type. It cannot handle two
different types of values: strings and dates. The solution is to use
MultiValueSubChildrenNodePropertiesTransformer
,
which stores each value in a separate property, allowing them to be of
different types.
YAML file JCR node
form:
tabs:
- name: tabText
label: Multivalue composite
fields:
- name: events
fieldType: multiValue
label: Events
transformerClass: info.magnolia.ui.form.field.transformer.multi.MultiValueSubChildrenNodePropertiesTransformer
field:
name: compositeField
fieldType: composite
transformerClass: info.magnolia.ui.form.field.transformer.composite.NoOpCompositeTransformer
fields:
- name: title
fieldType: text
label: Title
- name: date
fieldType: date
label: Date
Node name | Value |
---|---|
form |
|
tabs# |
|
tabText# |
|
fields# |
|
events# |
|
field# |
|
fields# |
|
title# |
|
fieldType |
text |
label |
Title |
date# |
|
fieldType |
date |
label |
Date |
fieldType# |
composite |
transformerClass# |
info.magnolia.ui.form.field.transformer.composite.NoOpCompositeTransformer |
fieldType# |
multiValue |
label# |
Events |
transformerClass# |
info.magnolia.ui.form.field.transformer.multi.MultiValueSubChildrenNodePropertiesTransformer |