Adding a menu item, pointing to an external url in the Angular portal

Partially answering my self here:

URL's added to the "RelatedApplications" table, do indeed appear. But they appear under "Other web applications", in the help (?) menu, in top right corner.

So this seems to work, but not exactly what I wanted. I would like to have the URL's to appear in the ordinary top menu. Like in the example in the Elemental UI:

https://elemental.dev.oneidentity.com/components/custom/top-navigation

But I'm not sure how to reuse this example in the portal code. So if there is someone that know how to do it, or point me in the right direction, it would be greatly appreciated.

Thanks!

Hello Kim,

you may want to give this code a try:

// Get related applications from api
          const relatedApplications = await this.qerClient.client.portal_relatedapplications_get()

          // Recursively convert related application structure to EuiMenuItem structure
          const mapApplicationToMenuItem = (app: RelatedApplication): EuiTopNavigationItem => ({
            type: app.ChildApps?.length ? EuiTopNavigationItemType.Menu : EuiTopNavigationItemType.ExternalLink,
            text: app.Display,
            url: app.Url,
            items: app.ChildApps?.map(mapApplicationToMenuItem)
          });

          // Add a new menu item containing the apps as child items  
          if (relatedApplications.length > 0) {
            this.menuItems.push({
              type: EuiTopNavigationItemType.Menu,
              text: await this.translateService.get('#LDS#Heading Other Web Applications').toPromise(),
              items: relatedApplications.map(mapApplicationToMenuItem)
            });
          }

You can easily test it by adding the snippet to qer-app-portal > src > app > app.component.ts directly under the assignment of this.menuItems.(here: https://github.com/OneIdentity/IdentityManager.Imx/blob/0ebeb21839d1dbb137f0e02219901039733aba18/imxweb/projects/qer-app-portal/src/app/app.component.ts#L112)

Of course this is just a "quick and dirty" approach intended to be used as a starting point.

This documentation from the sdk is helpful when it comes to building a "cleaner" solution using the menu factories:
IdentityManager.Imx/sdk_samples/02_adding_a_menue at v92 · OneIdentity/IdentityManager.Imx · GitHub

The qer library also has a service which you can use to implement your customization: "RelatedApplicationsService".

Kind regards, Florian

Great, thanks!

I got this example code to work. I'll look into tweaking it further, but as for now this does what I wanted.

Regards, Kim.