Hello,
Is there a way to add subItems to a VerticalNavigationBar? It seems like it should be possible since NavigationItem has a subItems property, but I have not found any examples of this in practice. I would like to have a vertical navigation bar with the top level items displayed, which expands to show the subItems when a top-level item is clicked.
var verticalNavBarData = getNavBarItems();
// Create a navigation item template as instance of CountingNavigationItem control var oNavBarItemTemplate = new sap.suite.ui.commons.CountingNavigationItem({ key : "{key}", text : "{text}", quantity: "{quantity}", tooltip: "{tooltip}" }); // Create a VerticalNavigationBar instance var oNavBar = new sap.suite.ui.commons.VerticalNavigationBar({ id: "navBar", items: { path : "/items", template : oNavBarItemTemplate }, select: function(oEvent) { alert("Navigation item with key='" + oEvent.getParameters().item.getKey() + "'\n and id='" + oEvent.getParameters().itemId + "' selected."); } }); // Apply model to Navigation Bar and select second item by default var oModel = new sap.ui.model.json.JSONModel(); oModel.setData(verticalNavBarData); oNavBar.setModel(oModel); oNavBar.setSelectedItem(oNavBar.getItems()[1]); // Create a BorderLayout instance var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", { width: "150px", height: "200px", begin: new sap.ui.commons.layout.BorderLayoutArea({ size: "150px", visible: true, content: [oNavBar] }) }); // Attach the BorderLayout to the page oBorderLayout1.placeAt("divVerticalNavBar");
function getNavBarItems(){
var subItem1 = {key : "subItem2", text : "subItem2"};
var subItem2 = {key : "subItem2", text : "subItem2"};
var result = { items : [ { key : "materialInfo", text : "MATERIAL INFO", quantity: 2, subItems: [subItem1,subItem2] }, { key : "plantCatalogMaint", text : "PLANT CATALOG MAINT", quantity: 0 } ]};
return result;