Explain how users can customize the layout of forms.

Call with Andrei

Customizing info.magnolia.ui.framework.layout.DefaultLayoutDefinition

No customization possible. You cannot change or add anything. Use it when you do not need to customize the layout.

Customizing info.magnolia.ui.framework.layout.TabbedLayoutDefinition

Example YAML definition

layout:
  class: info.magnolia.ui.framework.layout.TabbedLayoutDefinition
    tabs:
      personal:
        fields:
          - name: salutation
          - name: firstName
          - name: lastName
          - name: email
          - name: tokens
          - name: richtext
      more:
        fields:
          - name: address
      selects:
        fields:
          - name: select
          - name: twinSelect
          - name: multiSelect
          - name: radioGroup
          - name: checkboxGroup
          - name: linkField

No control over how the fields are rendered. You can add or remove tabs and fields. Tabs/fields will then be rendered vertically one after the other.

Customizing info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition

Example YAML definition

layout:
  class: info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
  template: /contacts/layouts/edit-contact.html

The template property is required with the declarative layout definition. Because we use Vaadin declarative syntax (https://vaadin.com/docs/v8/framework/application/application-declarative.html) to design custom layouts, the declarative template has to be an HTML document. Based on that template, the declarative layout is rendered.

You can add your own custom components to the Vaadin declarative layout. The tag of a component element can have one the following prefixes:

vaadin-: Vaadin core component
mgnl-: Magnolia custom or user-defined component
magnolia-: Magnolia property as defined in YAML

You can use Magnolia custom or user-defined components and Magnolia properties with Vaadin core components. Defining your own declarative layout allows you to place components exactly where you want them (vertically, horizontally, side by side, etc.).

NOTE: 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.

Sources

Arbitrary layouts: https://git.magnolia-cms.com/projects/PLATFORM/repos/ui/pull-requests/1000/overview

Vaadin declarative syntax: https://vaadin.com/docs/v8/framework/application/application-declarative.html