Skip to Content
0

How to add Multi-level navigation in horizontal menu bar for HCP Portal

May 17, 2017 at 12:36 PM

82

avatar image

Hi,

As per our requirement in the horizontal menu area there are some tabs which contains sub-tabs.

How to display those sub tabs and navigate to the target. I've attached the code for controller.js. We're using flexbox to display the menu.

Any help would be very helpful.

   "sap/ui/core/mvc/Controller"
], function(Controller) {
   "use strict";

   return Controller.extend("horizontalnavwidget.controller.Navigation", {
     
     onInit: function(){
       var siteService = this.getPortalSiteService();
       if(siteService){
         this.buildRealNavigationMenu(siteService);
       }else{
         this.buildMockNavigationMenu();
       }
     },
     
     buildRealNavigationMenu: function(siteService){
       var flexBoxMenu = this.byId("flexBoxMenu"), label;
       var pages = siteService.getMenuHierarchy();
       var   target = siteService.getCurrentAppTarget();
       for(var idx = 0  ; idx < pages.length ; idx++){
         var page = pages[idx];
         label = new sap.m.Label({
           text: page.title,
           width: "100%",
           textAlign: "Center",
           customData: new sap.ui.core.CustomData({key:"target", value: page.target}),
           layoutData: new sap.m.FlexItemData({growFactor: 1})
         }).addStyleClass("menuItem").attachBrowserEvent("click", this.onNavigate);
       
         

         if (target && target.semanticObject === 
page.target.semanticObject && target.action === 
page.target.action) {
           label.addStyleClass("selected");
         }
       
         if(idx + 1 < pages.length){
           label.addStyleClass("separator");
         }
         
         flexBoxMenu.addItem(label);
       }
     },

     buildMockNavigationMenu: function(){
       var flexBoxMenu = this.byId("flexBoxMenu"), label;
       for(var idx = 0  ; idx < 3 ; idx++){
           label = new sap.m.Label({
             text: "Page #" + idx,
             textAlign: "Center",
             width: "100%",
             layoutData: new sap.m.FlexItemData({growFactor: 1})
           }).addStyleClass("menuItem").attachBrowserEvent("click", this.onNavigate.bind(this));
           flexBoxMenu.addItem(label);
         }
     },
     
     onNavigate: function(oEvent){
       var navTarget = this.data("target");
       
       var crossApplicationNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
       crossApplicationNavigator.toExternal({
         target: navTarget
       });
     },
     
     
     getPortalSiteService: function(){
       try{
         return sap.ushell.Container.getService("SiteService");
       }catch(e){
         return;
       }
     }
     
     

   });

});
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers