Versions Compared

Old Version 32

changes.mady.by.user Ashraf Khamis

Saved on

compared with

New Version 33

changes.mady.by.user Ashraf Khamis

Saved on

Key

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

...

Info

Since Magnolia 6.2, FormLayoutDefinition has replaced the deprecated PlainFormLayoutDefinition as the default layout.

...

Tabbed layout

With the horizontal tabbed layout, you can order components horizontally. To disable spacing between components, set the spacing property to falseadd or remove tabs and fields. It is not possible to change how any tabs and fields are rendered.

Code Block
languageyml
titleExample horizontal tabbed layout definition
collapsetrue
compositelayout:
  $type: compositeFieldtabbedLayout
  labeltabs: Name
  layout: horizontal
  fieldspersonal:
    -  namefields: salutation
      label: Salutation
 - name: salutation
   $type: select
    - name: options:firstName
        - name: Mr.lastName
    details:
      valuefields: Mr.
        -  labelname: Mr.email
        - name: Mrs.phone
    address:
      valuefields: Mrs.
        -  labelname: Mrs.streetAddress
    - name: firstName
     - $typename: textpostalCode
      label: First name
    - name: lastNamecity
      $type: text
 -     labelname: Last namecountry

...

Horizontal layout

With the tabbed horizontal layout, you can add or remove tabs and fields. It is not possible to change how any tabs and fields are renderedorder components horizontally. To disable spacing between components, set the spacing property to false.

Code Block
languageyml
titleExample tabbed horizontal layout definition
collapsetrue
layoutcomposite:
  $type: tabbedLayoutcompositeField
  tabslabel: Name
  layout: horizontal
 personal fields:
    - name: fields:salutation
      label: Salutation
  - name: salutation
  $type: select
     - nameoptions: firstName
        - name: lastNameMr.
    details:
      fieldsvalue: Mr.
        -  namelabel: emailMr.
        - name: phoneMrs.
       address:   value: Mrs.
      fields:
    label: Mrs.
    - name: streetAddressfirstName
      $type: text
 -  name: postalCode
  label: First name
    - name: citylastName
      $type: text
  -    namelabel: countryLast name

Declarative layout

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.

...