I have a fragment containing an XML view with a side navigation menu
<SideNavigation id="sideNavigation" expanded="false">
<item>
<NavigationList expanded="false">
<NavigationListItem text="Start" icon="sap-icon://employee" select="initChangeView" expanded="false">
</NavigationListItem>
<NavigationListItem text="On Track" icon="sap-icon://building" select="initChangeView" expanded="false">
</NavigationListItem>
<NavigationListItem text="Details" icon="sap-icon://employee" select="initChangeView" expanded="false">
</NavigationListItem>
<NavigationListItem text="Comparison" icon="sap-icon://employee" select="initChangeView" expanded="false">
</NavigationListItem>
</NavigationList>
</item>
</SideNavigation>
I need to dynamically add and remove a custom CSS class when an item in the navigation is selected. My goal is to remove the "selectedNavItem" class from all NavigationListItems except the selected one, but I keep encountering a TypeError.
Cannot read property 'removeStyleClass' of undefined
The handler function in controller.js:
jQuery.sap.require("xxx.controller.NavigationBar");
[...]
initChangeView: function(oEvent){
setExpandedToFalse(this);
changeView(this, oEvent.getSource());
},
[...]
Code snippet from NavigationBar.js:
function changeView(controller, source) {
var items = source.getParent().getItems();
console.log(items);
for(i = 0; i < items.length; i++)
{
items[i].getBindingContext().removeStyleClass("selectedNavItem");
}
source.addStyleClass("selectedNavItem");
[...]
Thank you!