Page History
...
Info |
---|
This form definition is part of the Magnolia 6 UI framework. The fully qualified class name is If you work with the Magnolia 5 UI framework, see Form definition for Magnolia 5 UI instead. |
Table of Contents |
---|
Example
...
definition
Code Block | ||
---|---|---|
| ||
form:
properties:
salutation:
label: Salutation
$type: textField
i18n: true
firstName:
label: First name
$type: textField
required: true
lastName:
label: Last name
$type: textField
required: true
email:
label: Email
$type: textField
required: true
validators:
email:
$type: emailValidator
phone:
label: Phone
$type: textField
required: true |
The properties
list here is defined with the YAML list syntax.
...
Form properties
properties | required A list List of editor property definition items (typically, a list of fields). See Field definition for more information. |
| optional, default is Defines the form layout. The value must be a subtype of See Layout types for more information. |
...
$type | class |
---|---|
|
|
defaultEditorActionLayout | info.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition |
|
|
| info.magnolia.ui.framework.layout.HorizontalLayoutDefinition |
stacked | info.magnolia.ui.framework.layout.StackedLayoutProducer |
|
|
Default layout
With the default layout
Javadoc resource link | ||||
---|---|---|---|---|
|
From Magnolia 6.2.1, FormLayoutDefinition
has replaced the deprecated PlainFormLayoutDefinition
as the default layout.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
footerLayout:
$type: defaultEditorActionLayout
primaryActions:
- choose
- cancel
secondaryActions:
- above
- below |
Tabbed layout
Tabbed layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout:
$type: tabbedLayout
tabs:
personal:
fields:
- name: salutation
- name: firstName
- name: lastName
details:
fields:
- name: email
- name: phone
address:
fields:
- name: streetAddress
- name: postalCode
- name: city
- name: country |
Stacked layout
Horizontal layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
spacing
property to false
.Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
compositelayout: $type: compositeField label: Namehorizontal layout: stacked fields: - name: salutation label: Salutation $type: selecttextField options: - name: Mr. value: Mr. label: Mr.Salutation - name: Mrs. value: Mrs. label: Mrs. - name: firstName $type: texttextField label: First name - name: lastName $type: texttextField label: Last name |
...
Stacked layout
With the horizontal layout
Javadoc resource link | ||||
---|---|---|---|---|
|
spacing
property to false
vertically. Any captions are placed above the respective components, which means that more horizontal space is allocated to the components themselves. This is the default layout for composite fields.Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
compositelayout: $type: compositeField label: Namestacked layout: horizontal fields: - name: salutation label: Salutation $type: selecttextField options: - name: Mr. value: Mr. label: Mr. - name: Mrs. value: Mrs.label: Salutation label: Mrs. - name: firstName $type: texttextField label: First name - name: lastName $type: texttextField label: Last name |
Declarative layout
With the declarative layout
Javadoc resource link | ||||
---|---|---|---|---|
|
...
Info |
---|
If |
...
Action layout
With the editor action layout
Javadoc resource link | ||||
---|---|---|---|---|
|
To learn about its the layout properties, see footerLayout
.
...
language | yml |
---|---|
title | Example editor action layout definition |
collapse | true |
...