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

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

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.