An adaptive user interface (UI) ensures that users experience a tailored and efficient design depending on their role. This approach improves usability and enhances the user experience by showing relevant content, controls, and options based on the user’s responsibilities, permissions, or needs. In Power Pages, you can create adaptive UIs by leveraging Liquid templates, JavaScript, and conditional rendering to personalize the page layout, content, and interactions.
Here’s a step-by-step guide to building an adaptive UI based on user roles in Power Pages.
1. Define User Roles and Permissions
The first step in implementing an adaptive UI is defining the user roles within your system. These roles typically include:
- Admin: Full control over all features and content.
- Manager: Limited administrative features, with focus on reporting and user management.
- Employee: Limited to using specific tools and viewing personal content.
- Customer: View-only access, often limited to browsing products or services.
In Power Pages, user roles can be tied to the data stored in Dataverse or Azure Active Directory (AAD), and you can use this role information to adapt the UI dynamically.
2. Access User Role Information with Liquid Templates
You can use Liquid to access user roles dynamically, fetch user data, and conditionally render content. Liquid pulls information from Dataverse tables or custom tables and uses that to determine the role-specific UI.
Example: Fetching User Role from Dataverse
Assume you have a UserProfiles table in Dataverse where each user’s role is stored. You can query this data using Liquid templates to adapt the UI.
{% assign userProfile = entities.userprofile[0] %} <!-- Fetch the user profile from Dataverse -->
{% if userProfile %}
{% assign userRole = userProfile.role %}
{% else %}
{% assign userRole = "Guest" %}
{% endif %}
This Liquid code assigns the role of the current user to the userRole variable. If the role doesn’t exist (e.g., the user is not logged in), it defaults to “Guest.”
3. Conditional Content Rendering Based on Role
Once the user’s role is identified, you can conditionally render specific sections or UI elements based on the role. This makes it easy to provide different views for different types of users.
Example: Showing Content Based on User Role
You can use if conditions in Liquid to display role-specific content:
{% if userRole == "Admin" %}
<div class="admin-dashboard">
<h2>Admin Dashboard</h2>
<p>Welcome, Admin! Here are the system settings and management options.</p>
<!-- Admin-specific controls and settings -->
</div>
{% elsif userRole == "Manager" %}
<div class="manager-dashboard">
<h2>Manager Dashboard</h2>
<p>Welcome, Manager! You can manage reports and oversee user activities.</p>
<!-- Manager-specific content -->
</div>
{% elsif userRole == "Employee" %}
<div class="employee-dashboard">
<h2>Employee Dashboard</h2>
<p>Welcome, Employee! Access your tasks and personal resources here.</p>
<!-- Employee-specific tools and tasks -->
</div>
{% else %}
<div class="guest-dashboard">
<h2>Welcome to Our Portal!</h2>
<p>Sign in to access personalized content.</p>
<!-- Content for guest users -->
</div>
{% endif %}
In this example:
- Admin users see the full system management options.
- Manager users see a different dashboard with access to reports and user management.
- Employee users see tools relevant to their tasks.
- Guest users see a basic welcome message and are encouraged to sign in.
4. Dynamic Layout Adjustments Using JavaScript
While Liquid is great for server-side logic and data-driven content rendering, JavaScript allows you to create dynamic UI interactions and client-side behavior based on the user’s role. You can use JavaScript to adjust the layout, toggle elements, or provide more interactive functionality.
Example: Hiding Elements Based on User Role
You can use JavaScript to hide or show specific elements on the page based on the role. For example:
document.addEventListener("DOMContentLoaded", function () {
var userRole = "{{ userRole }}"; // Get the user role from Liquid
if (userRole === "Admin") {
document.querySelector('.admin-dashboard').style.display = 'block';
document.querySelector('.manager-dashboard').style.display = 'none';
document.querySelector('.employee-dashboard').style.display = 'none';
} else if (userRole === "Manager") {
document.querySelector('.admin-dashboard').style.display = 'none';
document.querySelector('.manager-dashboard').style.display = 'block';
document.querySelector('.employee-dashboard').style.display = 'none';
} else if (userRole === "Employee") {
document.querySelector('.admin-dashboard').style.display = 'none';
document.querySelector('.manager-dashboard').style.display = 'none';
document.querySelector('.employee-dashboard').style.display = 'block';
} else {
document.querySelector('.admin-dashboard').style.display = 'none';
document.querySelector('.manager-dashboard').style.display = 'none';
document.querySelector('.employee-dashboard').style.display = 'none';
}
});
This JavaScript code listens for when the page is fully loaded, grabs the user’s role, and then dynamically shows or hides specific sections of the page based on the user role. For example:
- Admin will see the admin dashboard and not the manager or employee sections.
- Manager will see the manager dashboard and hide the rest.
- Employee will only see the employee dashboard.
5. Role-Based Access to Specific Features
In addition to showing or hiding UI elements, role-based access control (RBAC) can be applied to limit what features users can access. For example, admins might be able to access certain administrative features, but employees cannot.
Example: Role-Based Button Visibility
You can hide or show buttons based on user roles. For example, only admins should be able to access system settings:
{% if userRole == "Admin" %}
<button class="btn-settings">Manage Settings</button>
{% endif %}
This ensures that only users with the Admin role see the “Manage Settings” button, making the UI more secure and relevant to each user.
6. User-Specific Themes or Branding
You may also want to apply different themes or branding based on the user’s role to further enhance the experience. For example, a manager may see a different color scheme or logo than an employee.
Example: Change Branding Based on Role
{% if userRole == "Admin" %}
<link rel="stylesheet" href="admin-theme.css">
{% elsif userRole == "Manager" %}
<link rel="stylesheet" href="manager-theme.css">
{% else %}
<link rel="stylesheet" href="default-theme.css">
{% endif %}
This code dynamically loads different stylesheets based on the user role, so the Admin, Manager, and Employee each have a distinct visual experience.
7. Mobile Responsiveness
Just like role-based UI adjustments, ensure the adaptive UI works seamlessly on mobile devices. You can use CSS media queries to ensure that layout changes based on user roles also maintain responsiveness for mobile users.
@media (max-width: 768px) {
.dashboard {
display: block; /* Stack content for mobile */
}
.admin-dashboard, .manager-dashboard, .employee-dashboard {
padding: 20px;
}
}
This ensures that the adaptive UI not only responds to user roles but also adapts to the screen size.