[MGNLUI-5143] DOC: How-to customize layout forms/editors in arbitrary way Created: 11/Apr/19  Updated: 10/Mar/21  Resolved: 24/May/19

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Neutral
Reporter: Christoph Meier Assignee: Ashraf Khamis
Resolution: Done Votes: 0
Labels: new-UI-framework, new-form
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
documentation
documents MGNLUI-4909 Ship 2 alternative ways to layout forms Closed
documents MGNLUI-4911 As a dev I want to be able to layout ... Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: Declarative layout
Sprint: Foundation 10, Foundation 11
Story Points: 2

 Description   

Explain how users can customize the layout of forms.

Call with Andrei

Customizing info.magnolia.ui.framework.layout.DefaultLayoutDefinition

No customization possible. You cannot change or add anything. Use it when you do not need to customize the layout.

Customizing info.magnolia.ui.framework.layout.TabbedLayoutDefinition

Example YAML definition

layout:
  class: info.magnolia.ui.framework.layout.TabbedLayoutDefinition
    tabs:
      personal:
        fields:
          - name: salutation
          - name: firstName
          - name: lastName
          - name: email
          - name: tokens
          - name: richtext
      more:
        fields:
          - name: address
      selects:
        fields:
          - name: select
          - name: twinSelect
          - name: multiSelect
          - name: radioGroup
          - name: checkboxGroup
          - name: linkField

No control over how the fields are rendered. You can add or remove tabs and fields. Tabs/fields will then be rendered vertically one after the other.

Customizing info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition

Example YAML definition

layout:
  class: info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
  template: /contacts/layouts/edit-contact.html

The template property is required with the declarative layout definition. Because we use Vaadin declarative syntax (https://vaadin.com/docs/v8/framework/application/application-declarative.html) to design custom layouts, the declarative template has to be an HTML document. Based on that template, the declarative layout is rendered.

You can add your own custom components to the Vaadin declarative layout. The tag of a component element can have one the following prefixes:

vaadin-: Vaadin core component
mgnl-: Magnolia custom or user-defined component
magnolia-: Magnolia property as defined in YAML

You can use Magnolia custom or user-defined components and Magnolia properties with Vaadin core components. Defining your own declarative layout allows you to place components exactly where you want them (vertically, horizontally, side by side, etc.).

NOTE: It is recommended that Magnolia properties be nested inside a <vaadin-form-layout> tag. If you insert a Magnolia property inside a <vaadin-vertical-layout> tag, the component will not be rendered as nicely.

Sources

Arbitrary layouts: https://git.magnolia-cms.com/projects/PLATFORM/repos/ui/pull-requests/1000/overview

Vaadin declarative syntax: https://vaadin.com/docs/v8/framework/application/application-declarative.html



 Comments   
Comment by Ashraf Khamis [ 24/May/19 ]

Page created at https://documentation.magnolia-cms.com/display/DOCS61/Defining+forms#Definingforms-Customizingformlayout. Reviewed by Andrei.

Generated at Mon Feb 12 09:23:37 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.