[MGNLUI-4909] Ship 2 alternative ways to layout forms Created: 04/Jun/18  Updated: 02/Nov/20  Resolved: 24/May/19

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

Type: Story Priority: Neutral
Reporter: Antti Hietala Assignee: Andrei Ichimescu
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 3d 0.25h
Original Estimate: Not Specified

Issue Links:
Cloners
is cloned by CNTCTSAPP-108 Provide a declarative sample layout Closed
Relates
relates to MGNLUI-5048 In complex dialogs, indicate presence... Open
dependency
depends upon MGNLUI-4911 As a dev I want to be able to layout ... Closed
is depended upon by MGNLDAM-187 Asset Editor: fields should be groupe... Closed
is depended upon by MGNLUI-3682 Find a way to group form fields to pr... Closed
is depended upon by MGNLUI-4811 Group complex fields visually with sp... Closed
is depended upon by MGNLUI-3612 Add a seperator field for forms Closed
documentation
to be documented by MGNLUI-5143 DOC: How-to customize layout forms/ed... Closed
to be documented by MGNLUI-5213 DOC: Ship 2 alternative ways to layou... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Release notes required:
Yes
Documentation update required:
Yes
Date of First Response:
Epic Link: UI framework: forms, dialogs, content editing
Sprint: Foundation 11
Story Points: 3

 Description   

Ship 2 alternative ways to layout forms. The APIs are in place, even some implementation has started.

User stories:

As a form designer, I want to set all address fields (street, ZIP code, city) visually apart from other fields on my form, so that they are understandable for all users, as related controls are easier to identify. Layout also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once. 

As a form designer, I want reduce visual clutter and only show relevant information first to the user as they fill a form. I'd like to use techniques such as progressive disclosure. Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.

As a developer, I want to implement and configure a custom form layout, so that I can support the goals above.

Acceptance criteria / list of alternative layouts:



 Comments   
Comment by Anja von Gunten [ 16/May/19 ]

aichimescu The group title should use the same font style as the accordeon titles in Stories app. I'm not sure what is currently applied there but it should use the same style (as they are the same, except that one is static and the other collapsable).

Comment by Mikaël Geljić [ 29/May/19 ]

some review suggestions:

  • simplify class & tag names for mgnl custom elements: mgnl-separator, mgnl-group(-layout) maybe
  • simplify attribute names (e.g. no need for group prefix if already present in tag name), and maybe align with stock Vaadin elements/layouts?
  • layout definitions are a good candidate for type-alias annotations (to be considered in follow-up, also apply existing ones to contacts-v8)
Comment by Anja von Gunten [ 29/May/19 ]

aichimescu slutz Would it be possible to do a ux/visual review ? could we set up a sample dialog that contains lines and group titles ?

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