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 Form layout Layout types for more information. |
Layout types
| $type | class |
|---|---|
|
|
defaultEditorActionLayout | info.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition |
|
|
Available field definition classes
...
| |
| info.magnolia.ui.framework.layout.HorizontalLayoutDefinition |
stacked | info.magnolia.ui.framework.layout.StackedLayoutProducer |
|
|
Default layout
With
| Javadoc resource link | ||||
|---|---|---|---|---|
|
...
Form layout
Default layout
With the default layout, it is not possible to configure anything. Use this layout class when there is no need for customization.
Use info.magnolia.ui.framework.layout.FormLayoutDefinition for the class property or form for the $type shortcut.
...
From Magnolia 6.2.1, FormLayoutDefinition has replaced the deprecated PlainFormLayoutDefinition as the default layout.
...
Tabbed layout
With the horizontal layout, you can enable spacing between fields in the layout.Use
| Javadoc resource link | |
|---|---|
|
|
class property or horizontal for the $type shortcut
|
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
compositelayout: $type: compositeFieldtabbedLayout labeltabs: Name layout: horizontal fieldspersonal: - namefields: salutation label: Salutation - name: salutation $type: select - optionsname: firstName - name: Mr.lastName details: valuefields: Mr. - labelname: Mr.email - name: Mrs.phone |
Horizontal layout
With
| Javadoc resource link | ||||
|---|---|---|---|---|
|
spacing property to false.| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
layout: $type: horizontal fields: - valuename: Mrs.salutation $type: textField label: Mrs.Salutation - name: firstName $type: texttextField label: First name - name: lastName $type: texttextField label: Last name |
...
Stacked 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.Use
| Javadoc resource link | |
|---|---|
|
|
class property or tabbedLayout for the $type shortcut
|
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
layout: $type: tabbedLayoutstacked tabs: personal: fields: - name: salutation - name$type: firstNametextField - namelabel: lastNameSalutation details: fields: - name: emailfirstName - name$type: phone address:textField fieldslabel: - First name: streetAddress - name: postalCodelastName - name$type: citytextField label: -Last name: country |
Declarative layout
With the declarative layout
| Javadoc resource link | ||||
|---|---|---|---|---|
|
Use info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition for the class property or declarativeLayout for the $type shortcut.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
layout: $type: declarativeLayout template: /contacts/layouts/edit-contact.html |
...
| Info |
|---|
If |
Action layout
With
| Javadoc resource link | ||||
|---|---|---|---|---|
|
To learn about the layout properties, see footerLayout.
Overview
Content Tools