Page History

...

Info

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.

Table of Contents

Example

...

definition

Code Block

language	yml

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
    phone:
      label: Phone
      $type: textField
      required: true

The properties list here is defined with the YAML list syntax.

...

Form properties

properties

required

A list List of editor property definition items (typically, a list of fields).

See Field definition for more information.

layout

optional, default is info.magnolia.ui.framework.layout.FormLayoutDefinition

Defines the form layout. The value must be a subtype of info.magnolia.ui.framework.layout.LayoutDefinition.

See Layout types for more information.

...

$type	class
`declarativeLayout`	`info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition`
`defaultEditorActionLayout`	`info.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition`
`form`	`info.magnolia.ui.framework.layout.FormLayoutDefinition`
`horizontal`	`info.magnolia.ui.framework.layout.HorizontalLayoutDefinition`
`stacked`	`info.magnolia.ui.framework.layout.StackedLayoutProducer`
`tabbedLayout`	`info.magnolia.ui.framework.layout.TabbedLayoutDefinition`

Default layout

With the default layout

Javadoc resource link

className	info.magnolia.ui.framework.layout.FormLayoutDefinition
renderType	asynchronous

, it is not possible to configure anything. Use this layout when there is no need for customization.

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

Javadoc resource link

className	info.magnolia.ui.framework.layout.TabbedLayoutDefinition
renderType	asynchronous

, you can organize components into tabsWith the tabbed layout, you can add or remove tabs and fields. 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

Stacked layout

Horizontal layout

With

Javadoc resource link

className	info.magnolia.ui.framework.layout.HorizontalLayoutDefinition
renderType	asynchronous

With the stacked 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

compositelayout:
  $type: compositeFieldhorizontal
  label: Name
  layout: stacked
  fields:
    - name: salutation
      label: Salutation
      $type: select
      options:textField
        - name: Mr.
          value: Mr.
          label: Mr.
        - name: Mrs.
          value: Mrs.label: Salutation
          label: Mrs.
    - name: firstName
      $type: texttextField
      label: First name
    - name: lastName
      $type: texttextField
      label: Last name

...

Stacked layout

With the horizontal layout

Javadoc resource link

className	info.magnolia.ui.framework.layout.StackedLayoutProducer
renderType	asynchronous

, 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: compositeField
  label: Namestacked
  layout: horizontal
  fields:
    - name: salutation
      label: Salutation
      $type: selecttextField
      options:
        - name: Mr.
          value: Mr.
          label: Mr.
        - name: Mrs.
          value: Mrs.label: Salutation
          label: Mrs.
    - name: firstName
      $type: texttextField
      label: First name
    - name: lastName
      $type: texttextField
      label: Last name

Declarative layout

With the declarative layout

Javadoc resource link

className	info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
renderType	asynchronous

, you can create form entries in an arbitrary Vaadin component container using the Vaadin declarative syntax. Use this layout for full customization.

...

Info
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`.

...

Action layout

With the editor action layout

Javadoc resource link

className	info.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition
renderType	asynchronous

, you can define an action area in both dialogs and the detail subapps of content apps. This is the default layout for dialog footers with and includes predefined primary and secondary actions.

...

language	yml
title	Example editor action layout definition
collapse	true

...

To learn about the layout properties, see footerLayout.

Page tree

Versions Compared

Old Version 49

New Version Current

Key

Example

definition

Form properties

Default layout

Tabbed layout

Tabbed layout

Stacked layout

Horizontal layout

Stacked layout

Declarative layout

Action layout