Page History

Forms define fields and similar components as well as their layout. At the moment, form Form definition is only used in dialogs and the detail subapps of content apps.

Info

Form This form definition is part of the Magnolia 6 UI framework. The fully qualified class name is is info.magnolia.ui.formeditor.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:
    - namesalutation: salutation
      classlabel: info.magnolia.ui.field.TextFieldDefinitionSalutation
    - name: firstName
      class: info.magnolia.ui.field.TextFieldDefinition $type: textField
      requiredi18n: true
    - namefirstName: lastName
      classlabel: info.magnolia.ui.field.TextFieldDefinition
      required: true
    - name: emailFirst name
      $type: textField
      required: true
        validatorslastName:
      label: Last   email:name
            class: info.magnolia.ui.framework.databinding.validator.EmailValidatorDefinition$type: textField
    -  namerequired: phonetrue
      $typeemail:
 textField
    - namelabel: streetAddressEmail
      $type: textField
      required: true
     - namevalidators: postalCode
      $type: textField
      requiredemail: true
    - name: city
      $type: textFieldemailValidator
      requiredphone:
 true
    - namelabel: countryPhone
      $type: textField
      required: true

...

Tip

When a property type is defined as a list in the corresponding Java class, you can use the YAML map syntax or list syntax. Map2BeanTransformer converts YAML in both cases correctly.

See YAML: Defining a list property via YAML map or list syntax.

Form properties

required (unless $type is used)

The type of the editor property definition item. The value must be a fully qualified class name and fieldEditorPropertyDefinition See Form definition - 6 UI for possible values.If the definition class is annotated with

`properties`	required A list List of editor property definition items (typically, a list of fields).
`name`	required The name of the editor property definition item. Use alphanumeric characters without spaces.
See Field definition for more information.
`layout`	optional, default is `info.magnolia.ui.framework.layout.FormLayoutDefinition` Defines the form layout. The value must be	`class`	a subtype of `info.magnolia.ui.`	`framework.layout.`	`LayoutDefinition`.	See Layout types for more information.

Layout types

$type	class
`declarativeLayout`	`info.magnolia.ui.`

field.FieldType, you can use the $type property instead.

$type

You can use this as a shortcut for class if the definition class is annotated with

`framework.layout.DeclarativeLayoutDefinition`
`defaultEditorActionLayout`	`info.magnolia.ui.`

field

dialog.

FieldType. The proper value is defined by the annotation.

Code Block

language	java
title	Example class annotation
collapse	true

@FieldType("textField")
public class TextFieldDefinition extends ConfiguredFieldDefinition<String> {
...
}

To use the $type property in YAML, see Form definition - 6 UI. Refer also to Form definition - 6 UI.

description

optional

Help text displayed when the user clicks the help icon. The value can be literal or a key of a message bundle. Not applicable to a static field.

i18n

optional, default is false

Enables i18n authoring support, which allows editors to write foreign-language or regionally targeted content. A two-letter language identifier (en, de, fr etc.) is displayed on controls where i18n is set to true.

label

optional

Field label displayed to editors. The value can be literal or a key of a message bundle.

If you do not provide the property, Magnolia will fall back to a generated i18n key.

If you do not want a label at all, define the property and set its value to a blank space such as label: " " in YAML.

styleName

optional

Additional style information for an editor property definition item applied to the element when the form is rendered.

The value can be a CSS class or a list of CSS classes separated by white spaces.

layout

optional, default is

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

PlainFormLayoutDefinitionThe value must be a fully qualified class name and a subtype of

TabbedLayoutDefinition

Default layout

With

Javadoc resource link

className	info.magnolia.ui.framework.layout.

...

See Form definition - 6 UI for more information.

Available field definition classes

...

FormLayoutDefinition
renderType	asynchronous

...

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.

The fully qualified class name of the plain layout is info.magnolia.ui.framework.layout.PlainFormLayoutDefinition.

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.

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

Tabbed layout

With The fully qualified class name of the tabbed layout is

Javadoc resource link

className

info.magnolia.ui.framework.layout.TabbedLayoutDefinition

. If the definition class is annotated with info.magnolia.ui.framework.layout.LayoutType, you can use the $type alias tabbedLayout instead


renderType	asynchronous

, you can organize components into tabs.

Code Block

language	yml
title	Example tabbed layout definition
collapse	true

layout:
  class$type: info.magnolia.ui.framework.layout.TabbedLayoutDefinition tabbedLayout
  tabs:
    tabspersonal:
      personalfields:
        fields- name: salutation
        - name: firstName
        - name: salutationlastName
    details:
      fields:
        - name: firstNameemail
        - name: phone

Horizontal layout

With

Javadoc-resource-link-macro

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

, you can arrange components horizontally. To disable spacing between components, set the spacing property to false.

Code Block

language	yml
title	Example horizontal layout definition
collapse	true

layout:
  $type: horizontal
  fields:
 name: lastName
      details- name: salutation
      $type: textField
   fields:   label: Salutation
    - name: firstName
     - name$type: emailtextField
      label: First name
    - name: phonelastName
      address$type: textField
      label: Last name

Stacked layout

With

Javadoc resource link

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

, 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

language	yml
title	Example stacked layout definition
collapse	true

layout:
  $type: stacked
  fields:
     - name: streetAddresssalutation
      $type: textField
      label: Salutation
    - name: postalCode
 firstName
      $type: textField
      label: First name
    - name: citylastName
      $type: textField
     - namelabel: countryLast 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 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

language	yml
title	Example declarative layout definition
collapse	true

layout:
  class$type: info.magnolia.ui.framework.layout.DeclarativeLayoutDefinitiondeclarativeLayout
  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

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 footers and includes predefined primary and secondary actions.

To learn about the layout properties, see footerLayout.

Page tree

Versions Compared

Old Version 4

New Version Current

Key

Example

definition

Form properties

Layout types

Default layout

Available field definition classes

Form layout

Plain layout

Tabbed layout

Tabbed layout

Horizontal layout

Stacked layout

Declarative layout

Action layout