Skip to Content
avatar image
Former Member

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

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;
       }
     }
     
     

   });

});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

0 Answers