Page History
Forms define fields and similar components as well as their layout. At the moment, form Form definition is only used in dialogs and the detail subapps of content apps.
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: - namesalutation: salutation classlabel: info.magnolia.ui.field.TextFieldDefinitionSalutation - name: firstName class: info.magnolia.ui.field.TextFieldDefinition $type: textField requiredi18n: true - namefirstName: lastName classlabel: info.magnolia.ui.field.TextFieldDefinition required: true - name: emailFirst name $type: textField required: true validatorslastName: label: Last email:name class: info.magnolia.ui.framework.databinding.validator.EmailValidatorDefinition $type: textField - namerequired: phonetrue $typeemail: textField - namelabel: streetAddressEmail $type: textField required: true - namevalidators: postalCode $type: textField required: true email: - name: city $type: textFieldemailValidator requiredphone: true - namelabel: countryPhone $type: textField required: true |
...
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: fields- name: 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: salutation name: lastName details: $type: textField fields: label: Salutation - name: emailfirstName $type: textField label: First name - name: phonelastName address$type: textField label: Last name |
Stacked layout
With
Javadoc resource link | ||||
---|---|---|---|---|
|
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: stacked fields: - name: streetAddress salutation $type: textField label: Salutation - name: firstName $type: postalCodetextField label: First name - name: citylastName $type: textField - namelabel: countryLast name |
Declarative layout
With the declarative layout
Javadoc resource link | ||||
---|---|---|---|---|
|
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
.