Page History
...
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 Layout types for more information. |
Available field definition classes
Include Page | ||||
---|---|---|---|---|
|
...
Layout types
$type | class |
---|---|
declarativeLayout |
|
form |
|
horizontal | info.magnolia.ui.framework.layout.HorizontalLayoutDefinition |
tabbedLayout |
|
Default layout
With the default layout, it is not possible to configure anything. Use this layout class when there is no need for customization.Use
Info |
---|
...
Info |
---|
Since Magnolia 6.2, |
...
With the horizontal layout, you can enable spacing between fields in the layout.
Use info.magnolia.ui.framework.layout.HorizontalLayoutDefinition
for the class
property or horizontal
for the $type
shortcut.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
composite: $type: compositeField label: Name layout: horizontal fields: - name: salutation label: Salutation $type: select options: - name: Mr. value: Mr. label: Mr. - name: Mrs. value: Mrs. label: Mrs. - name: firstName $type: text label: First name - name: lastName $type: text label: Last name |
...
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 info.magnolia.ui.framework.layout.TabbedLayoutDefinition
for the class
property or tabbedLayout
for the $type
shortcut.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: tabbedLayout tabs: personal: fields: - name: salutation - name: firstName - name: lastName details: fields: - name: email - name: phone address: fields: - name: streetAddress - name: postalCode - name: city - name: country |
...
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.Use info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
for the class
property or declarativeLayout
for the $type
shortcut.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
layout: $type: declarativeLayout template: /contacts/layouts/edit-contact.html |
...