Forms define fields and similar components as well as their layout. Form definition is used in dialogs and the detail subapps of content apps.
This form definition is part of the Magnolia 6 UI framework. The fully qualified class name is info.magnolia.ui.editor.FormDefinition
.
If you work with the Magnolia 5 UI framework, see Form definition for Magnolia 5 UI instead.
Example form definition
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
The properties
list here is defined with the YAML list syntax.
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 of editor property definition items (typically, a list of fields). See Field definition for more information. |
| optional, default is The value must be a subtype of See Form layout for more information. |
Available field definition classes
$type | class |
---|---|
checkBoxField | info.magnolia.ui.field.CheckBoxFieldDefinition |
checkBoxGroupField | info.magnolia.ui.field.CheckBoxGroupFieldDefinition |
codeField | info.magnolia.ui.field.CodeFieldDefinition |
|
|
|
|
dateField | info.magnolia.ui.field.DateFieldDefinition |
hiddenField | info.magnolia.ui.field.HiddenFieldDefinition |
|
|
listSelectField | info.magnolia.ui.field.ListSelectFieldDefinition |
|
|
passwordField | info.magnolia.ui.field.PasswordFieldDefinition |
radioButtonGroupField | info.magnolia.ui.field.RadioButtonGroupFieldDefinition |
richTextField | info.magnolia.ui.field.RichTextFieldDefinition |
sliderField | info.magnolia.ui.field.SliderFieldDefinition |
staticField | info.magnolia.ui.field.StaticFieldViewDefinition |
switchableField | info.magnolia.ui.field.SwitchableFieldDefinition |
textField | info.magnolia.ui.field.TextFieldDefinition |
tokenField | info.magnolia.ui.field.TokenFieldDefinition |
twinColSelectField | info.magnolia.ui.field.TwinColSelectFieldDefinition |
Your Magnolia installation may contain more fields depending on the installed modules.
Form layout
Plain layout
DEPRECATED
With the plain 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 the plain layout is info.magnolia.ui.framework.layout.PlainFormLayoutDefinition
($type
alias plain
).
Horizontal layout
With the horizontal layout, you can enable or disable spacing between fields in the layout.
The fully qualified class name of the horizontal layout is info.magnolia.ui.framework.layout.HorizontalLayoutDefinition
($type
alias horizontal
).
Tabbed 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.
The fully qualified class name of the tabbed layout is info.magnolia.ui.framework.layout.TabbedLayoutDefinition
($type
alias tabbedLayout
).
Declarative layout
With the declarative layout, you can create form entries in an arbitrary Vaadin component container using the Vaadin declarative syntax. Use this layout class for full customization.
The fully qualified class name of the declarative layout is info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
($type
alias declarativeLayout
).
To render the layout, a template
property is required. Because the Vaadin declarative syntax is used to design custom layouts, the declarative template has to be an HTML document.
In the template, t he tag of a component element can have one of the following prefixes:
vaadin-
: Vaadin core component.mgnl-
: Magnolia predefined or user-defined component. To define a mapping between a tag prefix and the Java package of the component, see the "Component Prefix to Package Mapping" section of Designing UIs Declaratively. The following Magnolia predefined components are available:<mgnl-separator/>
: horizontal line to separate content.<mgnl-group caption="">
: group header with acaption
attribute to separate content.
form-
: Magnolia property as defined in YAML.
You can always use Magnolia predefined or user-defined components and Magnolia properties with Vaadin core components.
It is recommended that Magnolia properties be nested inside a <vaadin-form-layout>
tag. If you insert a Magnolia property inside a <vaadin-vertical-layout>
tag, the component will not be rendered as nicely.
If VerticalLayout.java
is stored in src/main/java/info/magnolia/contacts/layout
, my-style.css
should be added to src/main/resources/info/magnolia/contacts/layout
.