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.
Tabbed layout
With the tabbed layout, you can add or remove tabs and fields. It is not possible to change how any tabs and fields are rendered
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 |
Editor action layout
With the editor action layout, you can define an action area in content apps. This is the default layout for dialog footers with predefined primary and secondary actions.
Stacked layout
With the stacked layout, you can arrange components vertically. This is the default layout for composite fields.
Horizontal layout
Horizontal layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
spacing
property to false
.Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
compositelayout: $type: compositeFieldhorizontal labelfields: Name layout: horizontal - fieldsname: salutation - name$type: salutationtextField label: Salutation - $typename: selectfirstName options$type: textField label: First name - name: Mr.lastName value$type: Mr.textField label: Last name |
Stacked layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: stacked fields: label: Mr. - name: Mrs.salutation value$type: Mrs.textField label: Mrs.Salutation - 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
Javadoc resource link | ||||
---|---|---|---|---|
|
To learn about the layout properties, see footerLayout
.