Versions Compared

Old Version 16

changes.mady.by.user Ashraf Khamis

Saved on

compared with

New Version Current

changes.mady.by.user Ashraf Khamis

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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
languageyml
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.PlainFormLayoutDefinitionFormLayoutDefinition

Defines the form layout. The value must be a fully qualified class name and be a subtype of info.magnolia.ui.framework.layout.LayoutDefinition.

See Form layout Layout types for more information.

Available field definition classes

...

Form layout

Plain layout

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

...

Layout types

$typeclass

declarativeLayout

info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition

defaultEditorActionLayoutinfo.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition

form

info.magnolia.ui.framework.layout.FormLayoutDefinition

horizontal

info.magnolia.ui.framework.layout.HorizontalLayoutDefinition
stackedinfo.magnolia.ui.framework.layout.

...

StackedLayoutProducer

tabbedLayout

info.magnolia.ui.framework.layout.

...

TabbedLayoutDefinition

Default layout

With

Javadoc resource link
classNameinfo.magnolia.ui.framework.layout.FormLayoutDefinition
renderTypeasynchronous
, it is not possible to configure anything. Use this layout when there is no need for customization.

(info) From Magnolia 6.2.1, FormLayoutDefinition has replaced the deprecated PlainFormLayoutDefinition as the default layout.

Tabbed layout

With

Tabbed layout

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.

The fully qualified class name of the tabbed layout is info.magnolia.ui.framework.layout.TabbedLayoutDefinition. If the definition class is annotated with

Javadoc resource link
className
info.magnolia.ui.framework.layout.
LayoutType
TabbedLayoutDefinition
renderTypeasynchronous
, you can organize components into tabs, you can use the $type alias tabbedLayout instead.

Code Block
languageyml
titleExample tabbed layout definition
collapsetrue
layout:
  $type: tabbedLayout
  tabs:
    personal:
      fields:
        - name: salutation
        - name: firstName
        - name: lastName
    details:
      fields:
        - name: email
        - name: phone

Horizontal layout

With

Javadoc resource link
classNameinfo.magnolia.ui.framework.layout.HorizontalLayoutDefinition
renderTypeasynchronous
, you can arrange components horizontally. To disable spacing between components, set the spacing property to false.

Code Block
languageyml
titleExample horizontal layout definition
collapsetrue
layout:
  $type: horizontal
  fields:
    address- name: salutation
      fields$type: textField
      label: Salutation
    - name: streetAddress
   firstName
      $type: textField
      label: First name
    - name: lastName
      $type: textField
      label: Last name

Stacked layout

With

Javadoc resource link
classNameinfo.magnolia.ui.framework.layout.StackedLayoutProducer
renderTypeasynchronous
, you can arrange components vertically. 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
languageyml
titleExample stacked layout definition
collapsetrue
layout:
  $type: stacked
  fields:
      - name: postalCode
salutation
      $type: textField
      label: Salutation
    - name: city
firstName
      $type: textField
      label: First name
    - name: countrylastName
      $type: textField
      label: Last name

Declarative layout

With the declarative layout

Javadoc resource link
classNameinfo.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
renderTypeasynchronous
, 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 info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition. If the definition class is annotated with info.magnolia.ui.framework.layout.LayoutType, you can use the $type alias declarativeLayout instead.

Code Block
languageyml
titleExample declarative layout definition
collapsetrue
layout:
  $type: declarativeLayout
  template: /contacts/layouts/edit-contact.html

...

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

Javadoc resource link
classNameinfo.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition
renderTypeasynchronous
, you can define an action area in both dialogs and the detail subapps of content apps. This is the default layout for footers and includes predefined primary and secondary actions.

To learn about the layout properties, see footerLayout.