In this blog post, I will show you how you show / hide controls on power pages applications based on the assigned web roles to the logged-in user. This post will help Power Platform Developers to overcome the limitations of showing controls based on security context. This method can also be applied to include additional logic on the page.
Problem Statement
How to show/ hide controls on the screen based on web role? How to show different form on same page for different types of user on Power Pages? How to apply role based access on Power Pages? How to show a message for authenticated users only on Power Pages? How to show content on a page based on web role in Power Pages? How to show a message on Power Portal if your account is not approved/ has no web roles yet?
Solution
To solve this problem, you can use liquid code to show the controls based on the logged-in user context. Liquid Programming Language allows you to fetch the security roles of the logged-in user. If you are not familiar with Liquid Programming language, you can refer to this Microsoft Documentation.
In this blog, I will follow a scenario where my Power Page application is used by two types of users, "Basic User" and "Application Admin". The Power Pages application will be an expense management system for Contractors and Vendors. If a user logs in as "Basic User", they are only allowed to submit the request details. However, if the user is an "Application Admin", they are allowed to create new request for themselves and on behalf of other users. The admins will see a separate section to populate additional details.
You can use this same mechanism for other controls, I am using form as just a reference.
To simplify the scenario, two separate forms can be created on the table, one for "Basic User" and one for "Application Admin". When you add the form to your page, then the configuration can be updated.
*** You can open the page in Visual Studio Code, by selecting the "Edit Code" option in the Power Pages editor.
*** If you already have the forms configured, you can directly move to the Step 4.
Let's Configure the logic:
1. Table Form Setup - Create two separate forms on the table level, one for Basic User and one for Admin.
2. Basic Form Setup on Power Pages - Add Basic Forms to the Power Pages, you can either use the Power Pages Editor or the Power Pages Management App. For this scenario, I am using Power Pages Management (previously called Portal Management) Model Driven App.
Basic User
Application Admin
3. Table Permissions - Set the appropriate table permissions so that the form displays properly.
4. Code Setup - The below mentioned code can be added to your page level:
*** The code should be only applied to the controls that you want to show based on the web role.
<!-- Checks if user has Basic User Role. basicuser is a variable that stores boolean value -->
{% assign basicuser = user | has_role: 'Basic User' %}
<!-- Checks if user has Application Admin Role. appadmin is a variable that stores boolean value -->
{% assign appadmin = user | has_role: 'Application Admin' %}
<!-- if condition to check if user is appadmin -->
{% if appadmin %}
<!-- shows the control for application admin -->
{% entityform name: 'Expense by Application Admin' %}
<!-- else if condition to check if user is a basic user -->
{% elsif basicuser %}
<!-- shows the control for basic user -->
{% entityform name: 'Expense as Basic User' %}
<!-- else condition to show message -->
{% else %}
<!-- shows the message on the screen -->
<p>You do not have permission to create Expense.</p>
<!-- ends if condition -->
{% endif %}
If you want to use multiple roles in a single condition:
*** Code for multiple roles at a time
{% assign admin = user | has_role: 'Administrators' %}
{% assign basicuser = user | has_role: 'Basic User' %}
{% assign appadmin = user | has_role: 'Application Admin' %}
{% if admin or appadmin %}
{% entityform name: 'Expense by Application Admin' %}
{% elsif basicuser %}
{% entityform name: 'Expense as Basic User' %}
{% else %}
<p>You do not have permission to create Expense.</p>
{% endif %}
DEMO
In this post we saw how to use liquid to fetch the web role of the logged in user and display content based on the permission. This will enable developers to enhance the user experience of Power Pages.
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.