Conditional visibility of nav items

Implementing conditional visibility for navigation items based on specific criteria or user roles is an excellent way to tailor the user experience, ensuring that only relevant content is visible to each user. In Power Pages (formerly Power Apps Portals), Power Apps, or similar platforms, you can use conditional visibility to show or hide navigation items based on various factors, such as user permissions, roles, page context, or query parameters.

Steps for Conditional Visibility of Navigation Items

Here’s how you can implement conditional visibility of navigation items, especially for Power Pages or Power Apps Portals.

Step 1: Define the Conditions for Visibility

The first step in implementing conditional visibility is defining the conditions under which a navigation item should be visible or hidden. These conditions can be based on:

User Role or Permissions: Display different menu items based on the user’s role.
Page Context: Show different items depending on the current page or section.
Query Parameters: Use URL query parameters to conditionally display navigation items.
User Profile: Display options based on the user’s profile attributes (e.g., department, job title).

For example:

If the user has an Admin role, show the Admin Dashboard link.
If the user is in a specific department, show Department-specific Pages.
If the page is about products, display Product-related navigation.

Step 2: Using Liquid Templating for Conditional Visibility in Power Pages

In Power Pages, you can use Liquid templating to control the visibility of navigation items. Liquid allows you to add logic that checks conditions and renders content accordingly.

Example 1: Conditional Visibility Based on User Role

Let’s say you want to display a “Admin Dashboard” link only if the user is an Administrator. You can check the current user’s role with Liquid:

{% if user.roles contains 'Administrator' %}
  <a href="/admin-dashboard">Admin Dashboard</a>
{% endif %}

Example 2: Conditional Visibility Based on Current Page

You can also show specific links depending on the page or section the user is currently viewing. For example, if the user is on the Products page, display links related to product categories.

{% if request.path contains '/products' %}
  <a href="/products/category">Product Categories</a>
  <a href="/products/new-arrivals">New Arrivals</a>
{% endif %}

This code will only show the “Product Categories” and “New Arrivals” links if the user is on a page with a URL that contains /products.

Example 3: Conditional Visibility Based on User Profile Data

You may want to show navigation items based on the user’s profile information stored in Dataverse. For example, you can show department-specific content based on the user’s department.

{% assign userDepartment = user.properties['department'] %}
{% if userDepartment == 'Marketing' %}
  <a href="/marketing-dashboard">Marketing Dashboard</a>
{% elsif userDepartment == 'Sales' %}
  <a href="/sales-dashboard">Sales Dashboard</a>
{% else %}
  <a href="/general-dashboard">General Dashboard</a>
{% endif %}

This snippet checks the user’s department property and displays the appropriate link.

Step 3: Using JavaScript for Conditional Navigation Items

While Liquid is server-side, if you want dynamic client-side behavior (e.g., showing or hiding navigation items after the page has loaded), JavaScript can be used to manipulate the DOM and apply visibility conditions dynamically.

Example 1: Conditional Visibility Based on URL Parameters

Let’s say you want to show a specific navigation item if a certain query parameter is present in the URL. For example, you can check if a ?user_type=admin parameter is present and conditionally show the Admin Dashboard link.

window.addEventListener('DOMContentLoaded', function() {
    var urlParams = new URLSearchParams(window.location.search);
    var userType = urlParams.get('user_type');

    if (userType === 'admin') {
        document.getElementById('admin-dashboard').style.display = 'block';
    } else {
        document.getElementById('admin-dashboard').style.display = 'none';
    }
});

In this example, if the URL contains ?user_type=admin, the Admin Dashboard link (which has an id="admin-dashboard") will be shown.

Example 2: Conditional Visibility Based on User Role Using JavaScript

If you want to control visibility based on the user’s role dynamically (and the role is already stored or accessible in JavaScript), you could do something like this:

javascriptCopyEditwindow.addEventListener('DOMContentLoaded', function() {
    var userRole = getUserRole(); // This could be a call to an API or retrieved from localStorage or sessionStorage

    if (userRole === 'Admin') {
        document.getElementById('admin-dashboard').style.display = 'block';
    } else {
        document.getElementById('admin-dashboard').style.display = 'none';
    }
});

function getUserRole() {
    // Logic to get the user's role (could be from a stored cookie, session, or API call)
    return 'Admin';  // Example role, replace with real data.
}

In this example, after the page loads, the JavaScript function checks the user’s role and updates the visibility of the Admin Dashboard link accordingly.

Step 4: Styling Hidden Items (Optional)

Sometimes, you may not want to completely remove navigation items from the DOM. Instead, you might want to hide them using CSS. This can be done dynamically by adding or removing CSS classes.

For instance, when using JavaScript to hide navigation items:

document.getElementById('admin-dashboard').classList.add('hidden');

Then, define the CSS for the hidden class:

.hidden {
    display: none !important;
}

This allows you to hide items dynamically while keeping the structure intact in the DOM, which may be useful for accessibility or SEO.

Step 5: Test the Implementation

Once you’ve implemented the conditional visibility logic:

Test for different user roles: Ensure that the correct navigation items appear based on the user’s role or profile.
Test across different pages: Verify that page-specific links appear only when the user is on the right page or section.
Test URL parameters: Ensure query parameters or session-based logic correctly influences the visibility of navigation items.

Step 6: Final Considerations

1. Security Considerations

Ensure proper user role validation: Always verify user roles and permissions on the server side (e.g., using Power Pages’ user authentication and roles) in addition to front-end conditions.
Avoid relying solely on client-side logic: Sensitive data should not be controlled purely through JavaScript, as users can manipulate client-side code. Always validate sensitive actions server-side.

2. Maintainability

Centralize logic: If possible, centralize your logic for conditional visibility (e.g., in Liquid templates) rather than duplicating code across different pages or JavaScript files.

3. UX/UI Considerations

Don’t clutter the UI: Be mindful of the user interface; conditionally hiding too many elements might confuse users. Make sure the navigation remains clean and easy to follow.
Feedback for hidden items: If you hide navigation items, consider providing feedback to users about why they can’t see certain items (e.g., “This section is only available to admins”).