Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-5143

DOC: How-to customize layout forms/editors in arbitrary way

    XMLWordPrintable

Details

    • Task
    • Resolution: Done
    • Neutral
    • None
    • None
    • None
    • Foundation 10, Foundation 11
    • 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

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                akhamis Ashraf Khamis
                cmeier Christoph Meier
                Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoR