[MGNLUI-5996] In web tab titles: show specific info on the current context instead of "Admincentral - Magnolia" Created: 18/Dec/19  Updated: 22/Jun/21  Resolved: 25/Feb/21

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

Type: Improvement Priority: Neutral
Reporter: Šimon Demočko Assignee: Roman Kovařík
Resolution: Fixed Votes: 2
Labels: ui-ux-impr, ux-improvement-selected
Remaining Estimate: Not Specified
Time Spent: 1d 7.75h
Original Estimate: Not Specified

Attachments: PNG File CleanShot 2021-02-08 at 13.56.07.png     PNG File Screenshot 2019-12-18 at 08.02.57.png     PNG File Screenshot 2019-12-18 at 08.03.06.png     PNG File Screenshot 2019-12-18 at 08.12.29.png     PNG File Screenshot 2019-12-18 at 08.14.42.png     PNG File Screenshot 2019-12-18 at 08.20.56.png     PNG File Screenshot 2021-02-08 at 08.14.51.png     PNG File Screenshot 2021-02-09 at 12.49.16.png    
Issue Links:
Relates
relates to MGNLUI-6550 Detail subApp should have presentable... Closed
relates to DOCU-2120 Magnolia documentation has the same f... Closed
relates to DOCU-2172 Update Magnolia documentation favicon Closed
dependency
is depended upon by MGNLUI-6560 Web tab title not changed when browsi... Open
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[X]  Architecture Decision Record (ADR)
Release notes required:
Yes
Date of First Response:
Epic Link: UI framework implementation
Sprint: UI FW 21, UI FW 22
Story Points: 5

 Description   

Currently when working in multiple tabs with Magnolia the user has a difficult time to know in which tab which work is being done. See screenshots.

The tab could show the current app or even item opened.

Something like:

  • "Pages: Tours"
  • "Pages | Tours"
  • or at least: "Pages"

To conserve precious tab title space "Magnolia" can be easily left out, since the tab icon is there to show we are working with Magnolia. Providing context in the tab is a common pattern today for modern apps.

Examples: Facebook, Jira, BitBucket, Confluence do this. E.g.: <Facebook icon> <Event name> | <Event venue> (see screenshots)



 Comments   
Comment by Christopher Zimmermann [ 18/Dec/19 ]

It could also be nice to show the "instance" name - maybe after the actual app as suggested in this ticket. Its common for developers to have a UAT, PROD and LIVE instances.

Comment by Roman Kovařík [ 08/Feb/21 ]

I don't think selections should be indicated when the browser is the focussed subapp.

We should be aware that this creates tens (or more, depends how long do you browse) of history items with the same name.
You can return to a previously selected item but just blindly click the back button until you are on the proper item in the history.

Ideally the "friendly name" of an item would be shown, like "Travel Home" for the travel home page. (Maybe the tab name could be used for this?)

The current implementation is aware of app/subApp label/name and location fragment ("/travel:edit")

Just in case this would be implemented as a higher level, would that be ok that these two would have the same title?:
https://demo.magnolia-cms.com/.magnolia/admincentral#app:pages-app:detail;/travel:edit
https://demo.magnolia-cms.com/travel/

The danger of app/subapp specific implementations is introduction of various forms by any developer, making it potentionaly inconsistent with other apps.

 

 

Typical cases:

https://demo.magnolia-cms.com/.magnolia/admincentral

https://demo.magnolia-cms.com/.magnolia/admincentral#app:pages-app

https://demo.magnolia-cms.com/.magnolia/admincentral#app:pages-app:browser;/travel::

https://demo.magnolia-cms.com/.magnolia/admincentral#app:pages-app:detail;/travel/about/what-we-believe:edit

https://demo.magnolia-cms.com/.magnolia/admincentral#app:dam:jcrDetail;/stories-demo/flavors-of-asia/joshua-newton-143838:edit

 

 

Comment by Šimon Demočko [ 08/Feb/21 ]

I'm not sure if we need 'Magnolia' at all, because it's obvious with the icon

Agree, I saw some webs also omitting the latter (e.g. Facebook), because of the icon. Maybe accessibility would be a reason, but that's a stretch.  

I don't think selections should be indicated when the browser is the focussed subapp.

Agree. Or we need to distinguish subapp in the tab name as well. 

The danger of app/subapp specific implementations is introduction of various forms by any developer, making it potentionaly inconsistent with other apps.

We could allow them to plug in only their part of the title scope? So touching just the most specific part and leaving app name, instance name and Magnolia untouched? The API would be just about providing the specific part.

Comment by Šimon Demočko [ 08/Feb/21 ]

Just in case this would be implemented as a higher level, would that be ok that these two would have the same title?:
https://demo.magnolia-cms.com/.magnolia/admincentral#app:pages-app:detail;/travel:edit
https://demo.magnolia-cms.com/travel/

How come it would be the same? 

I'd expect the first to be something like:
Travel Home - Detail - Pages | PROD
and the latter to be: 
Travel Home (which it is, see tab title, when you navigate to that URL)

Comment by Roman Kovařík [ 09/Feb/21 ]

would like to see if I’m on Author or Public instance

Ideally one should not be in the admincentral on public (this might be a confusion with public pages which titles are fully controlled by web developers and therefore not part of this ticket)

I guess this would be a neat thing to change on your own preferences.

This might be a future improvement. Not part of this ticket.

Also, an icon could distinguish environments as well, skipping the need for labels.

 Doesn't seem to be possible to have more favicons in one theme, see Only one favicon per theme
 

The title format mentioned in most of the comments above looks also the most technically feasible, that's:

This is how the history looks like:

As we get the detail title from the subApp tab caption,  MGNLUI-6550 might be required.

Minor open questions

  • separator ( - , | or combination)?
  • Omit instance environment if not configured (currently defaults to Magnolia which might be expected compared to previous Magnolia versions)?

 

 

Comment by Christopher Zimmermann [ 09/Feb/21 ]

So if the "sticker" is configured to UAT then we get

fb.png - Assets - UAT

?

Comment by Roman Kovařík [ 09/Feb/21 ]

Yes. Do we prefer

fb.png - Assets - UAT - Magnolia

or omit Magnolia everywhere?

Comment by Simon Lutz [ 09/Feb/21 ]

Thanks a lot rkovarik !

separator ( - , | or combination)?

I'd prefer the pipe |.

Omit instance environment if not configured (currently defaults to Magnolia which might be expected compared to previous Magnolia versions)?

Yes, that makes sense to me - rather show nothing if it's not configured than showing 'Magnolia'.

 

Comment by Anja von Gunten [ 09/Feb/21 ]

I prefer   |   too.

I still think Magnolia (at the end) is not needed.

Comment by Christopher Zimmermann [ 09/Feb/21 ]

Could the Magnolia at the end be an accessiblity thing? I'm not sure - but I just see that other sites - like Google always have the appname at the very end.

But I dont have a strong opinion about it.

-

Another note - Magnolia docs has the same favincon as Admincentral. A later improvement could be to tweak the favicon of the docs.

Comment by Roman Kovařík [ 10/Feb/21 ]

Thank you all.

DOCU-2120 for the favicon.

Comment by Roman Kovařík [ 11/Feb/21 ]

Reopened to go though: https://magnolia-cms.slack.com/archives/C01ML18LT8D

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