1

The documentation mentions there is a read-only attribute of menuItems. I am trying to access the label values of the menuItems, which are available in aura:iteration. I've tried:

component.get("v.menuItems") on init, which returns null.

Use-case: a custom vertical navigation menu, where I want to display the active menu item at the top of the list of a select element, as the first option. I am using a custom renderer currently, however it seems to be affecting the rest of the application and causing funky load behaviors of other components.

4
  • Just covering the bases here, you component extends forceCommunity:navigationMenuBase correct? My guess as to why menuItems is null on init is that they may not be available until after initialization. If that is the case I would use a change handler to grab the values in the JS controller.
    – nbrown
    Apr 27 '20 at 17:03
  • 1
    Nice, I didn't even think about using change. I'll try that now and report back!
    – Colleen
    Apr 27 '20 at 17:18
  • 1
    On change works, thanks!
    – Colleen
    Apr 27 '20 at 17:29
  • Nice! I added my response as an answer so that its more easily found for someone searching for this issue in the future.
    – nbrown
    Apr 27 '20 at 17:59
1

I would try using a change handler rather than the init handler as the v.menuItems may not be available on initialization of the component since they are provided from the Community JavaScript and are passed down from the extended component (forceCommunity:navigationMenuBase).

Example:

<!-- myNav.cmp -->
<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes">

    <aura:handler name="change" value="{!v.menuItems}" action="{!c.handleMenuItemsChange}"/>

    <aura:iteration items="{v.menuItems}" var="item">
        <!-- menu items here -->
    </aura:iteration>

</aura:component> 
/* myNavController.js */
({
    handleMenuItemsChange : function(cmp, event, helper) {
        // access menu items when available
        var items = cmp.get('v.menuItems');
    }
})
0

I am not sure why you are not getting the menu items as they are passed value and is defined in the base class. Ideally, you should get it.

Also, what you are trying can be achieved without any renderer code and regardless of the approach you take, you will need to make sure that you reinstate the state back once the navigation finishes.

Step 1: Add an attribute for storing either selected menu items' label or ID. I have used the ID.

<aura:attribute name="currentSelectedId" type="String"/>

Step 2: Create two iterations:

<aura:if isTrue="{!item.id == v.currentSelectedId}">
    <aura:iteration items="{!item.menuItems}" var="subItem">
        <a class="slds-m-left--large" data-menu-item-id="{!item.id}"
           onclick="{! c.onClick }">{!item.label}</a>
    </aura:iteration>
</aura:if>
<aura:if isFalse="{!item.id == v.currentSelectedId}">
    <aura:iteration items="{!v.menuItems}" var="item">
        <a class="slds-m-left--large" data-menu-item-id="{!item.id}"
           onclick="{! c.onClick }">{!item.label}</a>
    </aura:iteration>
</aura:if>

Step 3: Add on click handler

 onClick: function (component, event) {
        event.preventDefault();
        let id = event.target.dataset.menuItemId;
        if (id) {
            component.set('v.currentSelectedId', id);
            component.getSuper().navigate(id);
            **// Store current Id somewhere in storage or cookie and read it on load.**
        }
    },
1
  • Thanks for the response, I also considered doing two iterations, as my pattern of onClick and 'currentSelectedId' is exactly what you mention here.
    – Colleen
    Apr 27 '20 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.