Page History

...

With the default 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 default layout is Use info.magnolia.ui.framework.layout.FormLayoutDefinition ($type alias form) for the class property or form for the $type shortcut.

...

With the horizontal layout, you can enable spacing between fields in the layout.

The fully qualified class name of the horizontal layout is Use info.magnolia.ui.framework.layout.HorizontalLayoutDefinition ($type alias horizontal) for the class property or horizontal for the $type shortcut.

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 this layout class when the need for customization is minimal.

Use The fully qualified class name of the tabbed layout is info.magnolia.ui.framework.layout.TabbedLayoutDefinition ( $type alias tabbedLayout) for the class property or tabbedLayout for the $type shortcut.

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.

The fully qualified class name of the declarative layout is Use info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition ($type alias declarativeLayout)for the class property or declarativeLayout for the $type shortcut.

layout:
  $type: declarativeLayout
  template: /contacts/layouts/edit-contact.html

...