Skip to Content

Prevent routing on sap.tnt.NavigationListItem select when minimzed?

Hi,

one part of my question (prevent MainMenuItem from navigating on click) has already been answered here https://answers.sap.com/questions/39996/prevent-routing-on-saptntnavigationlistitem-select.html but I have another related issue. When the Sidenavigation is collapsed/ minimized, the MainMenuItem is visible and unfortunately clickable. Is it possible to set the visibility of that item to false when minimized or at least to remove the link?

There seems to be a mechanism that makes the MainMenuItem automatically clickable when minimized.

Thanks,

Oliver

collapsed.png (5.2 kB)
expanded.png (4.5 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Nov 18, 2016 at 08:13 AM

    My guess is, that you are using nested sap.tnt.NavigationListItem and the parent one has your event handler specified. This will be inherited to the nested sap.tnt.NavigationListItem:

    select="onMenuItemPressed"

    In a similar case we added individual event handlers like:

    <tnt:sideContent>
        <tnt:SideNavigation expanded="true" id="sideNavigation">
            <tnt:NavigationList id="sideNavigationList" items="{path: '/'}" templateShareable="true" >
                <tnt:NavigationListItem text="{text}" icon="{icon}" key="{name}" expanded="{= ${expanded} ? true : false }" hasExpander="true" select="onRootItemSelect" items="{
                            path: 'entries',
                            templateShareable: true
                        }">
                    <tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />
                </tnt:NavigationListItem>
            </tnt:NavigationList>
        </tnt:SideNavigation>
    </tnt:sideContent>
    

    While onItemSelect is triggering the routing, onRootItemSelect will manage the open/collapse:

    /**
     * Expand/collapse root menu group, when the list item is clicked.
     * Function required as the standard behavior is to expand/collapse only in case of click on the arrow.
     * @param {object} oEvent - Event context which triggered the function.
     * @returns {void}
     */
    onRootItemSelect: function(oEvent) {
    
        var oMenuGroup = oEvent.getSource();
    
        if (oMenuGroup.getExpanded()) {
            oMenuGroup.collapse();
        } else {
            oMenuGroup.expand();
        }
    }
    

    Here you could add checks if the main menu is collapsed or not and execute the expand collapse only if needed.

    Add comment
    10|10000 characters needed characters exceeded