...
From Magnolia 6.2.1, FormLayoutDefinition has replaced the deprecated PlainFormLayoutDefinition as the default layout.
| Code Block |
|---|
| language | yml |
|---|
| title | Example editor action layout definition |
|---|
| collapse | true |
|---|
|
footerLayout:
$type: defaultEditorActionLayout
primaryActions:
- choose
- cancel
secondaryActions:
- above
- below |
Tabbed layout
With the tabbed layout, you can arrange fields in tabs. It is not possible to change how any tabs and fields are rendered.
| Code Block |
|---|
| language | yml |
|---|
| title | Example tabbed layout definition |
|---|
| collapse | true |
|---|
|
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 |
...
Horizontal layout
With the stacked horizontal layout, you can arrange components vertically. This is the default layout for composite fieldshorizontally. To disable spacing between components, set the spacing property to false.
| Code Block |
|---|
| language | yml |
|---|
| title | Example stacked horizontal layout definition |
|---|
| collapse | true |
|---|
|
composite:
$type: compositeField
label: Name
layout: stacked
fields:
- name: salutation
label: Salutation
$type: select
optionshorizontal
properties:
- 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 |
Horizontal layout
multi:
$type: jcrMultiField |
Stacked layout
With the stacked With the horizontal layout, you can arrange components horizontally. To disable spacing between components, set the spacing property to falsevertically. Any captions are placed above the respective components, which means that more horizontal space is allocated to the components themselves. This is the default layout for composite fields.
| Code Block |
|---|
| language | yml |
|---|
| title | Example horizontal stacked layout definition |
|---|
| collapse | true |
|---|
|
compositelayout:
$type: compositeFieldstacked
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 |
...
| Code Block |
|---|
| language | yml |
|---|
| title | Example editor action layout definition |
|---|
| collapse | true |
|---|
|
form:
properties:
text:
label: Text
$type: textField
light: true
footerLayout:
$type: defaultEditorActionLayout
primaryActions:
commit: commit |