3

I'm trying to extend the navigationMenuBase interface to build a custom navigation menu in my community (Using Build Your Own template). A requirement I have is I need to be able to display a different menu list to the users based on their role.

So I've been trying to use the navigationLinkSetId. I run an initialize function when the aura component loads, to calculate which menu list should be used. However, when I set the navigationLinkSetId, it doesn't seem to render, and instead always uses the default menu list.

I've followed the documentation here to understand the navigationMenuBase interface

My component is described as:

<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes" controller="CalculateUserRegime">

  <aura:handler name="init" value="{!this}" action="{!c.initialise}" />
  <aura:attribute name="navigationLinkSetId" type="String" />

  <nav class="nav">
    <ul class="navigation--list">
      <aura:iteration items="{!v.menuItems}" var="item">
        <li class="{!'navigation--list-item' + ' ' + (item.active ? 'navigation--selected-item' : '')}">
          <a class="navigation--link" data-menu-item-id="{!item.id}" href="">{!item.label}</a>
        </li>
      </aura:iteration>
    </ul>
  </nav>
</aura:component>

Then in my controller, I am calculating which menu needs to be rendered, then setting the navigationLinkSetId.

({
  initialise: function (component, event, helper) {
 
    component.set("v.navigationLinkSetId", "My_Custom_Menu_List"); 
  
  }
});

I've created the menu list in the UI, and have then run the following SOQL query to find its developer name SELECT Id, DeveloperName, MasterLabel FROM NavigationLinkSet. That gave me the string value of My_Custom_Menu_List, hence why I'm attempting to hard code it in at the stage.

What's strange is that I am able to use the default attribute to set the menu list, like this:

<aura:attribute name="navigationLinkSetId" type="String" default="My_Custom_Menu_List" /> 

And that correctly sets my custom menu.

Any suggestions on how to correctly use the navigationLinkSetId?

1 Answer 1

1

So it seems that navigationLinkSetId is being set before the initialise runs.

To get around this you can dynamically create the navigation bar component

In the code where you want the navigation component to be (for example the theme layout controller):

({
  doInit: function (cmp, event, helper) {
    // dynamically add the navbar

    // use CalculateUserRegime to determine linkSetId
    helper.getUserRegime(cmp, event, helper).then(
      $A.getCallback(function (result) {
        cmp.set("v.linkSetId", result);
        // create NavigationBar component with correct navigationLinkSetId

        //set linkSetId
        var linkSetId = cmp.get("v.linkSetId");
        return $A.createComponent(
          "c:navigationBar",
          { "aura:id": "findableAuraId", navigationLinkSetId: linkSetId },
          function (newCmp, status, errorMessage) {
            // place on the page/layout

            var navBarCmp = cmp.get("v.navBarCmp"); //a region called {!v.navBarCmp}
            navBarCmp.push(newCmp);
            cmp.set("v.navBarCmp", navBarCmp);
          }
        );
      })
    );
  }
});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .