Hey everyone,, Hope you are doing well and staying safe!
In this #PowerGuideTip, I am going to share a Tip to customize portal default toolbar menu. As you know that currently portal toolbar menu (weblinks) has two major UI limitations:
- By default portal menu/toolbar can only be appeared on the header.
- Only display navigation menu up to 1 level. As depicted in pic below, you can see child links of only Power Guide Tips, not the child links of Power Platform and Dynamics 365.
Customizing portal UI is one of the most common business requirement, where your client wants to customize the portal UI (Login, Registration, Home and Toolbar menu) to match the portal UI with other existing applications & websites. Recently, I have came across a UI requirement, where I had to show the navigation menu in left panel instead of showing it on top.
- HTML + CSS – is being used to design the custom toolbar menu
- Liquid Code – Dynamically fetching the portal weblinks from web link set table.
Alright, let’s get into more details and implement the requirement by performing followings steps:
Step 1 – Create Web Links (ignore if you already have in your environment).
Note: I have created following Web Links under Primary Navigation Web Link Set.
Step 2 – Open ‘Mobile Header’ content snippet (Portal Management > Content Snippets) and paste the following code
- Update the Line 2 (portal logo & company name ) as per your business requirement. This line of code will already be presented in your content snippet.
- Update the CSS (Line 4 – 57) as per your UI guidelines.
- Line 63 – change the web link set name that you want to customize. I have used ‘Primary Navigation’ for the demonstration, however this might be different in your case. For ex: Default, Secondary Navigation, Profile Navigation etc.
- Lines (63 – 84) – Liquid code is used to fetch the weblinks under ‘Primary Navigation’ and also fetching the sublinks (childlinks) of each weblink. In the given code, I have fetched the sublinks only till second depth. As depicted in the pic below: D1 represents Depth 1 child links and D2 represents Depth 2 childlinks (child links of a child link) .
Step 3 – Hide portal default toolbar menu from Header template
Open Header web template and add style=”display:none;” at following places.
- Important Tip: You can create a new content snippet to write your code (i shared above) and include that in your Mobile Header content snippet.
Thank you for reading this article and hope you found it useful and valuable. Please share your feedback and hit subscribe to learn such more useful #PowerGuideTips. Stay tuned!