[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: |
|
||||||||||||
| 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 AndreiCustomizing 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 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. SourcesArbitrary 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. |