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 description: hello 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.
Tip |
---|
When a property type is defined as a list in the corresponding Java class, you can use the YAML map syntax or list syntax. Map2BeanTransformer converts YAML in both cases correctly. See YAML: Defining a list property via YAML map or 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 fully qualified class name and be a subtype of See Form definition - 6 UI Layout types for more information. |
Available field definition classes
...
Layout types
...
Form layout
Plain layout
With the plain layout, it is not possible to configure anything. Use this layout class when there is no need for customization.
...
$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 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 | ||||
---|---|---|---|---|
|
From Magnolia 6.2.1, FormLayoutDefinition
has replaced the deprecated PlainFormLayoutDefinition
as the default layout.
Tabbed layout
With The fully qualified class name of the tabbed layout is info.magnolia.ui.framework.layout.TabbedLayoutDefinition
. If the definition class is annotated with
Javadoc resource link | |
---|---|
|
|
|
$type
alias tabbedLayout
instead.Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: class: info.magnolia.ui.framework.layout.TabbedLayoutDefinition$type: tabbedLayout tabs: tabspersonal: personalfields: - fieldsname: salutation - name: firstName - name: salutation lastName details: fields: - name: firstNameemail - name: phone |
Horizontal layout
With
Javadoc-resource-link-macro | ||||
---|---|---|---|---|
|
spacing
property to false
.Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: horizontal fields: name: lastName details- name: salutation $type: textField fieldslabel: Salutation - name: firstName - name$type: emailtextField label: First name - name: phonelastName address$type: textField label: Last name |
Stacked layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: stacked fields: - name: salutation $type: streetAddresstextField label: Salutation - name: postalCode firstName $type: textField label: First name - name: citylastName $type: textField - namelabel: Last countryname |
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
. If the definition class is annotated with info.magnolia.ui.framework.layout.LayoutType
, you can use the $type
alias declarativeLayout
instead.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: class$type: info.magnolia.ui.framework.layout.DeclarativeLayoutDefinitiondeclarativeLayout template: /contacts/layouts/edit-contact.html |
...
Info |
---|
If |
Action layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
To learn about the layout properties, see footerLayout
.