oblique-bit / oblique

An Angular front-end framework Tailored for your swiss branded business web application, Oblique provides a standardized corporate design look and feel as well as a collection of ready-to-use Angular components. Oblique, through its fully customizable master layout, takes care of the application's structure, letting you focus on the content.
https://oblique.bit.admin.ch
MIT License
55 stars 13 forks source link

Main Menu - get a menu item opened in a new tab in Oblique 10.x.y #108

Closed milan-ka-sk closed 1 year ago

milan-ka-sk commented 1 year ago

It seem like, with Oblique 10.x.y there is no simple way to setup a menu link to open in a new tab (target _blank). We set the menu up with a config that looks like this and corresponds to the ObINavigationLink[] type: const mainMenu = [ { "id":"menu-consultations", "label":"rt.consultations.home.title", "url":"home", "privilege":"CONSULTATIONS_ACCESS", "isExternal":false }, { "id":"menu-reports-admin", "label":"rt.mainMenu.admin", "url":"admin", "children":[ { "id":"menu-announcements-admin", "label":"rt.mainMenu.announcementsAdminApp", "url":"https://www.gate-r.bag.admin.ch/apvsapps/ui-2/announcements", "isExternal":true, // WE WANT TO HAVE IT OPENED IN A NEW TAB "privilege":"ANNOUNCEMENTS_ADMIN" } ], "isExternal":false } ]

we set it up as an Input to the ob-master-layout: <ob-master-layout [navigation]="mainMenu"> which passes it under the hood further to the master-layout-navigation.component.

We cant figure out, why the child menu item with the id: menu-announcements-admin will not open in a new tab like it was in the oblique versions 9.x.y. Looking into the oblique source code of the (master-layout-navigation.component.html) we also tried to set the field 'sameTarget' of the child to false, which did not help.

Is there a way to open a menu link in a new tab via this config?

c-saner commented 1 year ago

Hello,

Thank you for your report.

External links are automatically opened in a new tab.

If you go to the master-layout documentation page https://oblique.bit.admin.ch/components/master-layout and activate the external links you will see the behavior working.

Could you please try with only defining the id, label & url of your external link?

If it's still not working we will need to open a support ticket.

Kind regards

milan-ka-sk commented 1 year ago

Hello,

our app sits here: https://www.gate-r.bag.admin.ch/consultations/ui/home

we want (the customer wants) to open a menu item in a new tab linking to here https://www.gate-r.bag.admin.ch/apvsapps/ui-2/announcements

I think Oblique decides itself looking at the url. Both start with 'https://www.gate-r.bag.admin.ch/' so Oblique decides it is not external. If the link was e.x. www.google.com, it would open it in a new tab.
The field 'isExternal' set to true seems to have no effect on opening in new tab.

To open the particular link in a new tab, we hacked it via a code similar to this in the ngAfterViewInit of the app.component.ts: const anouncementLinkEl = document.getElementById('menu-announcements-admin'); anouncementLinkEl.setAttribute('target', '_blank');

The question is, is there a way to force open any link in a new tab e.x. via the nav config array (ObINavigationLink[])?

c-saner commented 1 year ago

Hello,

Now we understand your issue.

We have opened a bug (ticket number OUI-2377).

We will keep you informed over this GitHub issue about the resolution and fix version.

Thanks a lot for reporting this issue.

Kind regards

nina-egger commented 1 year ago

This has been fixed in version 10.2.0