Skip to Content
Nov 07, 2013 at 05:37 PM

Using Vertical Navigation Bar



I am trying to get the VerticalNavigationBar to work in my application. I have version 1.14.5 of the SAPUI5 Runtimes installed in SAP HANA Studio and my code completion tool finds the libs needed, but when I try to access the control, I errors. I even took the example coding from the SDK site ( and tried it in a test page and it fails.

In the browser, the error messages I get are different in Chrome and FF at line 52 in the view file

FF (Using Firebug): TypeError: sap.suite.ui.commons.VerticalNavigationBar is not a constructor

Chrome: Uncaught TypeError: undefined is not a function

My code is below.

sap.ui.jsview("medportal_sapui5.member_single", {          /** Specifies the Controller belonging to this View.           * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.          * @memberOf medportal_sapui5.member_single          */           getControllerName : function() {                    return "medportal_sapui5.member_single";          },          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.           * Since the Controller is given to this method, its event handlers can be attached right away.           * @memberOf medportal_sapui5.member_single          */           createContent : function(oController) {                            // Create a VerticalNavigationBar instance                            var oNavBar = new sap.suite.ui.commons.VerticalNavigationBar({                                id: "navBar",                                items: [                                         new sap.ui.ux3.NavigationItem({id : "vnb1", text : "item 1"}),                                        new sap.ui.ux3.NavigationItem({id : "vnb2", text : "item 2"}),                                        ],                                select: function(oEvent) {                                    alert("Navigation item with key='" + oEvent.getParameters().item.getKey() +                                                          "'\n        and id='" + oEvent.getParameters().itemId + "' selected.");                                }                            });                            // Create a BorderLayout instance                            var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {                                width: "500px", height: "200px",                                begin: new sap.ui.commons.layout.BorderLayoutArea({                                    size: "250px",                                    visible: true,                                    content: [oNavBar]                                })                            });                            // Attach the BorderLayout to the page                            oBorderLayout1.placeAt("content");          }});

My view code is:

<!DOCTYPE HTML><html>          <head>                    <meta http-equiv="X-UA-Compatible" content="IE=edge">                    <script src="/sap/ui5/1/resources/sap-ui-core.js"                                        id="sap-ui-bootstrap"                                        data-sap-ui-libs="sap.ui.commons, sap.suite.ui.commons, sap.ui.ux3, sap.ui.table, sap.viz"                                        data-sap-ui-theme="sap_goldreflection"                                        data-sap-ui-language="en">                      </script>                    <!-- adding data-sap-ui-language="en" is a work-around for fail on chrome -->                    <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->                    <script type="text/javascript" src="./medportal_sapui5/global.js" ></script>                    <script>                                        sap.ui.localResources("medportal_sapui5");                                        var view = sap.ui.view({id:"idmembermain1", viewName:"medportal_sapui5.member_single", type:sap.ui.core.mvc.ViewType.JS});                                        view.placeAt("content");                    </script>          </head>          <body class="sapUiBody">                    <div id="content"></div>          </body></html>

I checked for updates in SAP HANA Studio and I have version 1.14.5 of the SAPUI5 libs

What am I missing? I have activated the whole project several times, closed the browser and started new sessions in incognito/private browsing to be sure that I wasn't caching anything.

Thank you