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. |
Available field definition classes
...
magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition | |
|
|
| 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.The fully qualified class name of
From Magnolia 6.2.1, FormLayoutDefinition
has replaced the deprecated PlainFormLayoutDefinition
as the default layout is info.magnolia.ui.framework.layout.FormLayoutDefinition ($type
alias form
).
Horizontal layout
With the horizontal layout, you can enable or disable spacing between fields in the layout.
Tabbed layout
With The fully qualified class name of the horizontal layout is
Javadoc resource link | |
---|---|
|
|
|
$type
alias horizontal
).Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
compositelayout: $type: compositeFieldtabbedLayout labeltabs: Name layout: horizontal fieldspersonal: - namefields: salutation label: Salutation - name: salutation $type: select - name: options: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 this layout class when the need for customization is minimal.
Javadoc resource link | ||||
---|---|---|---|---|
|
info.magnolia.ui.framework.layout.TabbedLayoutDefinition
($type
alias tabbedLayout
).Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: tabbedLayoutstacked tabs: personal: fields: - name: salutation - name$type: firstNametextField - name: lastName details: fields:label: Salutation - name: emailfirstName - name$type: phonetextField address: fieldslabel: - name: streetAddress First name - name: postalCodelastName - name$type: citytextField label: -Last name: country |
Declarative layout
With the declarative layout
Javadoc resource link | ||||
---|---|---|---|---|
|
The fully qualified class name of the declarative layout is info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
($type
alias declarativeLayout
).
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
.