[PAGES-59] Allow to add components also at the top of an area Created: 30/Apr/15  Updated: 15/Nov/16  Resolved: 11/Apr/16

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: 5.4.3
Fix Version/s: 5.4.5

Type: Improvement Priority: Major
Reporter: Andreas Weder Assignee: Ngoc Nguyenthanh
Resolution: Fixed Votes: 1
Labels: is-time-consuming, page-editor, pain-point, quickwin, user-feedback, ux
Remaining Estimate: 0d
Time Spent: 9d 2h 20m
Original Estimate: 4d

Attachments: PNG File 1-1 Add component.action.png     PNG File 1-2 Add component.placeholder.png     PNG File 2 Add dialog.png     Text File Choose where to add.bmml     PNG File Choose where to add.png    
Issue Links:
Relates
relates to PAGES-67 Rename texts in "Create new component... Closed
causality
is causing MGNLPN-346 CLONE - Magnolia saves the "position"... Closed
is causing PAGES-96 Magnolia saves the "position" attribu... Closed
is causing PAGES-64 Ask a user where to add a new compone... Closed
dependency
is depended upon by MGNLCE-25 Cover PAGES-59 in UI tests 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
Date of First Response:
Epic Link: AX: improve page editor
Sprint: Saigon 39
Story Points: 8

 Description   

We currently offer two ways to add a new component:

  • You click on the "new component" placeholder.
  • With an area selected, you click on the "add component" action.

In both cases, we open a dialog to pick one of the components available in the affected/selected area. The component is then added at the location of the placeholder, which is typically at the end of the list. There's, however, no way to add a component in other locations of the list, in particular at the beginning of the list.

We'll thus allow a user to pick one of several, preconfigured locations in the dialog that also asks him or her to pick the type of component to add. We should support both "at the beginning" and "at the end" for all areas, with "at the end" being the default. If feasible, allow for the amount and the actual location where new components get added to be configured.

While placeholder can in theory be configured and moved elsewhere (I think there could be several ones), I would not want us to add two placeholders per area to not increase the UI complexity in the page editor ever more. For the same reason, I would not want us to introduce a second "+" (add) icon on the bars itself.


UPDATE: Copied from the comments

Here's the clarification, after double-checking with Andreas:

  • We call for radio options in the pages:newComponent dialog. This is a relatively cheap solution to let e.g. news editors to add latest articles on top easily.
    • We acknowledge that we skipped the component dialog (in PAGES-58) when there is only one type of component available; we're ok with this.
    • We don't show this field for single component areas.
  • We don't do the secondary split of the "add component" action in the end, not to bloat the action bar.
  • We consider configuring position of the placeholder(s) on the area definition

  • Added a wireframe showing the radio button group for picking where to add the component (at the beginning or at the end).
  • As a side note, you'll notice I've also renamed the dialog title and the label of the first input field to be more in-line with what we have elsewhere. If that's easy to change in one go, please do so, else feel free to create a follow-up issue for these label changes.


 Comments   
Comment by Andreas Weder [ 19/Jun/15 ]

Verify if this has been done already.

Comment by Ngoc Nguyenthanh [ 16/Feb/16 ]

Splitting Add component action into 2 actions Add component at top and Add component at bottom by:

  • Add new property position in CreateComponentActionDefinition
  • Keep the old action addComponent without renaming due to side effects. By default it works like before: add component at the bottom of an area.
  • Add new action addComponentAtTop with position property is configured with value top.
  • Upgrade tasks to rename & add actions.
  • Sort by configured position in info.magnolia.pages.app.action.CreateComponentAction.ComponentCreationCallback and on success of info.magnolia.pages.app.action.CreateComponentAction#openDialog
Comment by Ngoc Nguyenthanh [ 10/Mar/16 ]

weder Let me clarify a bit about expectation of the improvement
1. In the dialog "Create new component". You want to add 2 fields:

  • Position to select a predefined position: at the top, at the bottom
  • Amount number of components will be added with component and position which are selected above.

2. Splitting "Add component" action into "Add component at top" and "Add component at bottom" is an additional option

So

  • Is there 2 expectations? Select one of them or mix 2 options?
  • If we mix 2 options then when user click on "Add component at top" the amount default is 1 and the position should be on top. Same behavior for the Add component at bottom action. Right? In this case do we need to keep the original action "Add component"?
Comment by Mikaël Geljić [ 11/Mar/16 ]

weder While tackling this, another action was added to the action bar.
It seems that was not the primary intent, rather have controls in the component dialog first?
Besides, ejervidalo rightfully pointed out that we're starting to clutter the action bar even more, that's why I'm asking for confirmation there.

It also kinda conflicts with PAGES-58: how does one add a component to the top when there is only one available component? Do we skip it for the sake of clarity?

Comment by Mikaël Geljić [ 14/Mar/16 ]

Here's the clarification, after double-checking with Andreas:

  • We call for radio options in the pages:newComponent dialog. This is a relatively cheap solution to let e.g. news editors to add latest articles on top easily.
    • We acknowledge that we skipped the component dialog (in PAGES-58) when there is only one type of component available; we're ok with this.
    • We don't show this field for single component areas.
  • We don't do the secondary split of the "add component" action in the end, not to bloat the action bar.
  • We consider configuring position of the placeholder(s) on the area definition (cc weder to file a follow-up issue).

Anything I missed? Reopening/updating this issue; I will also decline the current PR.

Comment by Andreas Weder [ 14/Mar/16 ]

Added a wireframe showing the radio button group for picking where to add the component (at the beginning or at the end).

As a side note, you'll notice I've also renamed the dialog title and the label of the first input field to be more in-line with what we have elsewhere. If that's easy to change in one go, please do so, else feel free to create a follow-up issue for these label changes.

Comment by Andreas Weder [ 24/Mar/16 ]

mgeljic rkovarik I'm commenting the discussion started on the PR here: https://git.magnolia-cms.com/projects/MODULES/repos/pages/pull-requests/11/overview - in the future, please take discussions to the actual issue, so that we can all follow it more easily.

I'd like to end the discussion on this feature and get the current implementation integrated. It's an effective solution to fulfill a request coming from customers frequently. It's undisturbing if the default behavior remains the same (i.e. we add a new component at the end by default). We can improve on it later gradually. Thanks.

Generated at Mon Feb 12 06:15:13 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.