Platform Navigation

The platform navigation consists of the platform navigation components, the platform menu service, platform menu state and platform navigation interaction state. Each of these constructs work together to manage and change the platform navigation based on the client's context and the page requirements.

Usage

Platform navigation interaction state

Select and set the config of the entire navigational components for the current page

  import {PlatformNavigationInteraction, PlatformNavigationInteractionState, UpdatePlatformNavigationInteraction} from "@investec-online/platform-state-management";
  
  platformNavigationInteractions: PlatformNavigationInteraction
  
  this._store.select(PlatformNavigationInteractionState.getPlatformNavigationInteraction).subscribe(res => {
    if(res !== undefined){
      this.platformNavigationInteractions = res
    }
  })
  
  this._store.dispatch(new UpdatePlatformNavigationInteraction({showLeftNav: true}))

Available config properties to pass to platform navigation interactions

export interface PlatformNavigationInteraction {
  showFooter?: boolean,
  showHeader?: boolean,
  showLeftNav?: boolean,
}

Getting the menu items from the platform menu service

  import {PlatformMenuInterface, PlatformMenuState, PlatformMenuItem} from "@investec-online/platform-state-management";
  
  platformMenu: PlatformMenuInterface;
  menuItem: PlatformMenuItem;
  selectedMenuItem: PlatformMenuItem;
  
  this._store.select(PlatformMenuState.getPlatformMenu).subscribe(res => this.platformMenu = res); // returns the full menu config
  this.menuItem = this._store.selectSnapshot(state => PlatformMenuState.getPlatformMenuItem({Name:'My banking'}, state.PlatformMenu)); //returns a specific menu item
  this.selectedMenuItem = this._store.selectSnapshot(PlatformMenuState.getSelectedMenuItem);// returns the current selectecd menu item

setting the selected menu item in the store

  import {UpdatePlatformMenuSelectedMenuItem, PlatformMenuItem} from "@investec-online/platform-state-management";
  import {Store} from "@ngxs/store";
  
  selectedMenuItem: PlatformMenuItem;
  
  this._store.dispatch(new UpdatePlatformMenuSelectedMenuItem(this.selectedMenuItem));

Full menu config

export interface PlatformMenuInterface{
  mainMenu: PlatformMenuItems,
  mainMenuWithoutChildren: PlatformMenuItems,
  callResultMap?: Array<PlatformCallResultMapModel>,
  hasError?:boolean,
  currentMenuRegion?: string
  selectedMenuItem?: PlatformMenuItem
}

Menu item

export interface PlatformMenuItem {
  Id: number,
  PositionRank: number,
  Name: string,
  ExclusiveHide: boolean,
  AbsoluteUrl: string,
  New: boolean,
  SearchKeys: string,
  Children: Array<PlatformMenuItem>
}

The menu config is set up by the platform using the client context. The platform menu service will make various calls to the API and will aggregatre all the menu items into one config. The various links for each of the menu items is also stored in a config file that gets mapped to each menu item, looking at the current region set for the client.Menu items urls paths can be found here

libs/platform-navigation/src/lib/platform-menu-config.ts

In the case where a single Menu Item has multiple regional URL's, you need to specify the menu region when the client lands on your page by including the following:

import {Store} from "@ngxs/store";
import {UpdateMenuRegion} from "@investec-online/platform-state-management";

this._store.dispatch(new UpdateMenuRegion('za')) //for za region URL's

in the above example, clicking a menu item with multiple regional URLs it will use the current menu region to resolve to the correct menu URL for that specific menu item: menuUrlZA

{
    "menuId": "19",
    "redirectUrl": {
      "menuUrlZA": "/content/investec/payments/en/desktop/managePayments.html", // <-- service will select this URL based on current selected region 
      "menuUrlUK": "/io-uk-wpaas/pbuk/dashboard/pay-and-transfer/manage-payments/manage-online-payments",
      "menuUrlMU": "/pbmu/pbmu.html/managePayments"
    },
    "analyticsQueryString": ""
}

Be sure to set this property when your project gets loaded.