Personalized navigation tiles

Personalized navigation tiles are an effective way to provide a dynamic and user-specific experience on Power Pages. These tiles can display different content, links, or navigation options based on user roles, preferences, or specific attributes. This enhances user engagement and ensures that users see the most relevant information right when they log in, making the portal experience more customized and user-friendly.

In Power Pages, you can implement personalized navigation tiles using a combination of Liquid Templates, JavaScript, user data, and permissions. The process involves identifying the user, gathering relevant information, and displaying customized navigation tiles based on that information.

Here’s a step-by-step guide on how to implement personalized navigation tiles in Power Pages:

Step 1: Understanding the Concept of Navigation Tiles

A navigation tile is essentially a visual element (often a button or box) that links to a specific page, form, or feature within the portal. These tiles are often displayed on a homepage or a dashboard. They can contain text, images, icons, and links, and they guide users to relevant content based on their role, preferences, or actions.

Personalizing these tiles means displaying different sets of tiles for different users based on factors such as:

User Role (Admin, Manager, Customer, etc.)
User Profile Attributes (department, location, etc.)
User Activity (recent interactions, interests, etc.)
Permissions (what content the user is allowed to view)

Step 2: Defining the Personalization Logic

Personalization can be based on various criteria, and the logic for displaying navigation tiles will depend on how you intend to categorize your users. For example:

Role-Based Personalization: Different tiles for different roles such as Admin, User, or Guest.
Custom Attributes: Personalized tiles based on user-specific attributes, like their department, region, or subscription type.
User Permissions: Display tiles only if the user has the necessary permissions to access the content.

Example Personalization Scenarios:

Admin Users: Admins may see tiles for managing users, setting up new content, or viewing detailed reports.
Customers: Customers may see tiles for placing orders, accessing support, or viewing their account.
Guests: Guests might see tiles for registration, login, or browsing available services.

Step 3: Using Liquid Templates to Personalize Navigation

In Power Pages, Liquid Templates allow you to fetch dynamic data and display content based on user attributes. You can use Liquid to detect the user’s role or other attributes and then conditionally display navigation tiles.

Liquid Template Example:

Fetching User Information with Liquid: You can use Liquid code to fetch the logged-in user’s role or other attributes and personalize the navigation tiles accordingly.

{% if user %}
   {% assign userRole = user.roles[0].name %}
{% endif %}

Personalized Tile Logic: After assigning the user’s role, you can conditionally display different navigation tiles based on the role.

<div class="nav-tiles">
   {% if userRole == "Admin" %}
      <div class="tile">
         <a href="/admin-dashboard">
            <h3>Admin Dashboard</h3>
            <p>Manage settings, users, and more.</p>
         </a>
      </div>
      <div class="tile">
         <a href="/manage-content">
            <h3>Manage Content</h3>
            <p>Update site content and manage pages.</p>
         </a>
      </div>
   {% elsif userRole == "Customer" %}
      <div class="tile">
         <a href="/my-orders">
            <h3>My Orders</h3>
            <p>View your recent orders and statuses.</p>
         </a>
      </div>
      <div class="tile">
         <a href="/support">
            <h3>Customer Support</h3>
            <p>Get help with your products.</p>
         </a>
      </div>
   {% else %}
      <div class="tile">
         <a href="/login">
            <h3>Login</h3>
            <p>Access your account and view orders.</p>
         </a>
      </div>
      <div class="tile">
         <a href="/register">
            <h3>Register</h3>
            <p>Sign up to get started with our portal.</p>
         </a>
      </div>
   {% endif %}
</div>

Explanation:

user.roles[0].name: This fetches the first role of the user (you can customize this based on how roles are assigned in your portal).
if userRole == "Admin": Based on the role, different tiles are shown. For example, Admins get access to an Admin Dashboard tile and content management, while Customers get tiles for viewing orders and support.

Step 4: Styling and Layout for Navigation Tiles

You can use CSS to style the navigation tiles for an appealing layout. Ensure that the tiles are visually distinct and intuitive, making the portal easy to navigate.

CSS for Styling Tiles:

.nav-tiles {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.tile {
   width: 30%;
   margin: 10px 0;
   padding: 20px;
   border: 2px solid #ddd;
   border-radius: 8px;
   background-color: #f4f4f4;
   text-align: center;
}

.tile a {
   text-decoration: none;
   color: #333;
}

.tile h3 {
   font-size: 1.5em;
   margin-bottom: 10px;
}

.tile p {
   font-size: 1em;
   margin-top: 10px;
}

.tile:hover {
   background-color: #e0e0e0;
   border-color: #ccc;
}

CSS Explanation:

display: flex: This makes the tiles align horizontally, wrapping into the next line when space is insufficient.
tile class: Defines each tile’s dimensions, padding, background, and border.
tile:hover: Adds hover effects to make the tiles interactive and visually engaging.

Step 5: Testing and Adjustments

After implementing personalized navigation tiles, test the portal with different users (with varying roles or attributes) to ensure that the correct tiles are being displayed.

Testing Scenarios:

Test with Admin Role: Ensure Admin users see the tiles related to management, such as user and content management.
Test with Customer Role: Verify that Customers only see tiles related to orders, support, and profile settings.
Test with Guest: Ensure that users who are not logged in see tiles for registration or login.

Step 6: Advanced Personalization (Optional)

For more advanced scenarios, you can add JavaScript to fetch additional user preferences or make the navigation tiles more interactive.

Example: Dynamically load tiles based on user activity (e.g., showing a “New Feature” tile if the user has recently engaged with that feature).
Example: Personalize tiles based on user’s location or subscription tier, by checking user attributes stored in the database.