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 arrange fields in
Javadoc resource link | ||||
---|---|---|---|---|
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: tabbedLayout tabs: personal: fields: - name: salutation - name: firstName - name: lastName details: fields: - name: email - name: phone |
Horizontal layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
spacing
property to false
.Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: horizontal addressfields: - name: fields:salutation $type: textField - name: streetAddress label: Salutation - name: postalCodefirstName $type: textField - name: city label: First name - name: country |
Horizontal layout
With the horizontal layout, you can arrange components horizontally. To disable spacing between components, set the spacing
property to false
.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: lastName $type: horizontaltextField properties: multi: $typelabel: jcrMultiFieldLast name |
Stacked layout
With the stacked layout
Javadoc resource link | ||||
---|---|---|---|---|
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: stacked fields: - name: salutation label: Salutation $type: selecttextField options: - name: Mr. value: Mr. label: Mr. - name: Mrs. value: Mrs. label: Mrs.label: 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 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 |
...