Power Apps Portals – Navigation Menu: Setting up a tree structure menu

Hi

In Power Apps Portals, the main navigation menu is represented by the Web Link Set and Web Link objects (entities). A Web Link contains a reference to a Web Page from the Portal or an external URL. The Web Link Set contains a group of Web Links, and can be placed via Liquid template in the Portal.

When setting up Power Apps Portals, by default, it comes with with a few Web Link Sets pre-defined. The Default Web Link Set is used as the primary menu in your Portal. For a better understanding of all the properties of Web Links and Web Link Sets, please refer to the following documentation: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/manage-web-links.

The way the menu is rendered by default, we cannot have sub-menus or a title to split Web Links. In this post, I will show you a quick tip on how to setup a tree structure for your Portal menu/primary navigation, something like this:

MENU
– – – – – – – – – – – –
 TITLE 01
LINK A
LINK B
 TITLE 02
LINK A
LINK B

Implementation

To achieve this, I am going to make customizations in the Web Link entity. There is no problem modifying the OOB Portal entities, just make sure you add any changed objects to an unmanaged solution when moving to other environments, you can’t export the Portals solution as it is a managed solution.

The code that renders the menu is in Liquid Template, and it’s placed in the Header Web Template, we will also make a few changes there.

By default, if you add a custom field to your Portal entities, it will be reflected in the Liquid objects, so you can easily access the value without writing additional code.

If for some reason you prefer not to change the entity, that's fine, another approach would be when creating your Web Link record, add some tag in the name (for example *menu-title*)

Now let’s jump into the customization:

• Create a new field in the Web Link entity (I am calling “Display as Title”)
• Add the new field to the Web Link form

• I am leaving Page / URL blank, additionally if you want you could add a business rule to hide/show those fields according to the Display as Title value
• Now open your “Header” Web Template, I am changing the code with the following logic:
  • If my custom field “ollie_displayastitle” is true, display the link as a title instead of an <a> element
  • In my example, I am using a <strong> element, but you could use anything here, preferably you should also add a class from your CSS to get a better look & feel
  • If you didn’t create the custom field and are using the tag like I mentioned *menu-title*, your if condition will be {% if sublink.name contains “*menu-title*” %} and then you also need to remove that using liquid filter {{ sublink.name | remove: “*menu-title* “}}
• This snippet of code can be found on the line 62 for the Header Web Template (OOB Portals):

 {% for sublink in sublinks %}
  <li role="none">
    {% if sublink.ollie_displayastitle %}
      <strong>{{ sublink.name | default:sublink.title | escape }}</strong> 
      <!-- this can be any element type -->
    {% else %}
      <a 
        role="menuitem" 
        aria-label="{{ sublink.name | default:sublink.title | escape }}" 
        href="{{ sublink.url }}" 
        {% if sublink.Open_In_New_Window %} 
          target="_blank" 
        {% endif %} 
        {% if sublink.nofollow %}
          rel="nofollow" 
        {% endif %} 
        {% if sublink.tooltip %}
          title="{{ sublink.tooltip | escape }}"
        {% endif %}>
        {{ sublink.name | default:sublink.title | escape }}
      </a> 
    {% endif %}
  </li>
{% endfor %}

• This is the final result:

Conclusion

By customizing Portal entities and existing Web Templates, we are not only making customization to the Portals but also extending its original functionality.

This post idea came after seeing a few questions on the communities about changing the way the menu is rendered. I hope this post encourages you to make changes to the way the menu is rendered OOB.