Conditional navigation menus based on role

Loading

Conditional navigation menus are a great way to personalize user experiences in Power Pages by displaying different menu items depending on the user’s role. This can help control access to certain sections of a site or portal, ensuring that only users with the right permissions can see or interact with specific content.

In Power Pages (formerly Power Apps Portals), you can use Liquid Templates and Web Roles to dynamically alter the navigation structure based on user roles. Below is a step-by-step guide on how to create role-based conditional navigation menus in Power Pages.


Overview

By leveraging Liquid, Power Pages can query the current user’s role and adjust navigation items accordingly. This process involves:

  1. Identifying the user’s roles.
  2. Rendering specific navigation items based on those roles.

Step 1: Set Up Web Roles in Power Pages

Web Roles in Power Pages map to security roles in Dataverse. Users are assigned web roles which define what they can see and do in the portal.

Steps to configure Web Roles:

  1. Navigate to Portal Management in the Power Platform Admin Center.
  2. Go to Web Roles.
  3. Create or edit a web role (e.g., Admin, User, Guest).
  4. Assign appropriate permissions based on the role (e.g., which pages they can access).

Step 2: Create Liquid Code for Conditional Menus

Now that you have web roles, you can use Liquid Templates to create conditional navigation menus. You’ll need to check the user’s web roles and render the menu accordingly.

Example Liquid Code for Conditional Navigation

In this example, a navigation menu is rendered differently depending on whether the user is an Admin or a Standard User.

{% if user %}
{% assign userRoles = user.webroles %}

<ul class="navigation-menu">
<li><a href="/home">Home</a></li>

{% if userRoles contains 'Admin' %}
<li><a href="/admin/dashboard">Admin Dashboard</a></li>
<li><a href="/admin/settings">Settings</a></li>
{% endif %}

{% if userRoles contains 'User' %}
<li><a href="/user/profile">Profile</a></li>
<li><a href="/user/settings">User Settings</a></li>
{% endif %}

{% if userRoles contains 'Guest' %}
<li><a href="/guest">Guest Page</a></li>
{% endif %}

</ul>
{% else %}
<p>You must be logged in to see the menu.</p>
{% endif %}

Explanation of the Code:

  • Check for logged-in user: The {% if user %} checks if the user is logged in.
  • Assign roles: user.webroles contains the roles assigned to the current user.
  • Conditional Menu Items:
    • If the user has the Admin role, show the Admin Dashboard and Settings links.
    • If the user has the User role, show the Profile and User Settings links.
    • If the user is a Guest, show a specific guest page link.

Step 3: Apply the Liquid Code in the Portal

  1. Go to Portal Management.
  2. Under Web Templates, create a new template or edit an existing one where you want to include the conditional navigation.
  3. Paste the Liquid code into the template.

For example, you could place the code in the header of the portal layout, so the menu is displayed on all pages.


Step 4: Customize Navigation Structure

The above example is a basic implementation. You can extend it further based on your requirements:

  1. Multiple Roles: A user may have multiple roles (e.g., both Admin and User). You can create more complex conditions for these scenarios.
  2. Role Hierarchy: If you want Admins to have all User links and vice versa, you can further nest the conditional statements.
  3. Menu Styles: You can add CSS classes or JavaScript for dynamic effects, like dropdowns, to enhance the menu.

Example Extended Code:

{% if user %}
{% assign userRoles = user.webroles %}

<ul class="navigation-menu">
<li><a href="/home">Home</a></li>

{% if userRoles contains 'Admin' %}
<li><a href="/admin/dashboard">Admin Dashboard</a></li>
<li><a href="/admin/settings">Admin Settings</a></li>
<li><a href="/admin/reports">Reports</a></li>
{% endif %}

{% if userRoles contains 'User' %}
<li><a href="/user/profile">User Profile</a></li>
<li><a href="/user/messages">Messages</a></li>
{% endif %}

{% if userRoles contains 'Guest' %}
<li><a href="/guest">Public Content</a></li>
{% endif %}

</ul>
{% else %}
<p>Please log in to access your personalized menu.</p>
{% endif %}

Step 5: Test Your Navigation

Once the code is added and the portal is updated, log in with users that have different roles:

  1. Admin User: Should see links related to admin tasks.
  2. Standard User: Should see profile-related links.
  3. Guest User: Should see public content only.
  4. Anonymous User: Should see a message indicating that they need to log in.

Step 6: Optimize and Secure

  • Cache the Menu: To improve performance, especially if your portal has a lot of users, consider using caching strategies for rendering dynamic content.
  • Hide Sensitive Data: Make sure no sensitive data is exposed in the menu, especially for roles like Guests or unauthenticated users.
  • Fallback Content: Provide appropriate fallback navigation for when a user does not have any roles.

Advanced Features

Dynamic Permissions for Pages

You can create more complex behavior by not just conditionally rendering links in the menu but also restricting access to entire pages based on roles.

For instance:

  • Use Entity Permissions in Dataverse to restrict access to records.
  • Combine Liquid code with these permissions to ensure only the right users can access particular sections.

Leave a Reply

Your email address will not be published. Required fields are marked *