[MGNLUI-5052] Improve vertical display of multivalue and composite fields Created: 11/Sep/18  Updated: 05/May/21  Resolved: 31/Aug/20

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

Type: Improvement Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Unassigned
Resolution: Obsolete Votes: 1
Labels: ux-improvement
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: Zip Archive content-type-examples.zip     PNG File image-2019-02-26-17-15-07-064.png     PNG File multi-empty.png     PNG File multivalue composite fields (1).png     PNG File multivalue.png    
Issue Links:
Relates
relates to MGNLUI-5268 Improve horizontal display for compos... Closed
relates to MGNLUI-5846 Cannot See Multivalue Field Within Cu... Closed
relates to MGNLUI-5636 Improve horizontal display for compos... Closed
dependency
depends upon MGNLUI-5684 Extend MultiFormView to use LayoutPro... Closed
depends upon MGNLUI-5957 multivalue composite field is hard to... Closed
supersession
is superseded by MGNLUI-5976 Bad vertical alignment for multi-valu... 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)
Date of First Response:
Epic Link: M6 UI & UX Improvements

 Description   

Mockup for vertical composite fields:

Mockup for vertical multivalue composite fields:


Current issues:

Multivalue fields have some display issues:

  • It's hard to see where one item ends and the next one starts. There should be some kind of visual separator/indicator between "Country" and "Street above.
  • It's hard to tell what will be deleted if I click on a delete icon. The vertical alignment of the delete icon, could maybe be improved, not sure. It used to be inline with the bottom of the item.
  • The vertical alignment of the first field does not match "addresses"
     

There are some additional problems when a composite field includes a multivalue field.

 

 
"Contact Data" is a composite field which holds "Email", "Phone number" and "Addresses".

  • Its hard to understand what is "in" "Addresses". Maybe anything under a composite field should be indented to the right a bit?

(The issue may not be specifically about a composite containing a multivalue, it could be just about anytime a composite includes another composite.)

App and Content files available in light module attached as a zip "content-types-examples".

 



 Comments   
Comment by Simon Lutz [ 12/Feb/19 ]

Needs review (czimmermann).

Comment by Christopher Zimmermann [ 12/Feb/19 ]

TODO for czimmermann:

  • Add label fields.
  • Take new screenshots on 6.
  • Get avongunten's input on what the default layout should look like.
Comment by Christopher Zimmermann [ 26/Feb/19 ]
  • Moved to UI project.
  • Redid examples and screenshots on Magnolia 6.
  • Rewrote description and deleted outdated comments.
  • avongunten Could you please take a look and advise on UI?
Comment by Anja von Gunten [ 28/Feb/19 ]

czimmermann slutz I created some mocks only by defining space between the elements. As far as i can recall it's the easiest way for combining fields in composite fields. Visually it takes up some space but it works.

Pls review them here https://zpl.io/VDBKd1v

Maybe mgeljic can review if that is easily feasible or if some other layout would be easier ? 

Comment by Christopher Zimmermann [ 28/Feb/19 ]

Looks good to me.

Comment by Christopher Zimmermann [ 27/Jun/19 ]

Problems described here are still present on 6.1

Comment by Šimon Demočko [ 08/Apr/20 ]

This wiki seems to be very relevant.  https://wiki.magnolia-cms.com/pages/viewpage.action?spaceKey=UX&title=Alternative+form+layouts **Maybe we need to reconcile the mockups with it?

The acceptance criteria are unclear from UX side - mockups seem to be showing multiple options - which of them should we support? If multiple, this is closely related to MGNLUI-5684 

Comment by Simon Lutz [ 16/Apr/20 ]

Updated the ticket with the two default options provided by UX. Alternatives to the default is a separate topic.

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