Designing A Role-Based User Interface In Power Apps

Designing A Role-Based User Interface In Power Apps


A successful app has many different types of users, each with their own needs. Employees, Managers and Administrators all require unique levels of access to maintain data privacy and should be able to perform tasks assigned to their role. I will show you how to design a role-based user interface in Power Apps that adapts to the person using the app.



Site Inspections App


The ‘Site Inspections App’ is used by the quality control department of a restaurant-chain to track the result of on-site audits. Inspectors should only be able to see their own records whereas the manager has the ability to view all records. An administrator also has the unique ability to delete a record if needed.


We will build the ‘Site Inspections App’ to look like the image below. I have used a different color scheme for each role but my instructions do not include how to do this.



Make a new SharePoint list called ‘App Users‘ with two columns: User (Person column type) and Role (Choices column type) with the options Employee, Manager and Administrator. Any people in the User column will need to exist within your organization so you will need to choose different names than I do.

UserRole
Jennifer HoustonEmployee
John MillerEmployee
Alice LemonEmployee
Sarah GreenManager
Matthew Devaney (your name)Administrator



Open Power Apps and create a new Canvas App From Blank called Site Inspections App.

When the user starts the app we need to determine their user details (varUser) and role (varRole). Put this code in the OnStart property of the app.

// Obtain username and email of the logged-in user
Set(varLoggedInUser, User());

// Find the user with a matching email in the App Users list
With(
    {wUserRecord: LookUp('App Users', User.Email=varLoggedInUser.Email)},
    Set(varUser, wUserRecord.User);
    Set(varRole, wUserRecord.Role.Value)
);

// If matching user is not found, insert a new user into the list with the role Employee
If(IsBlank(varRole),
    With(
        {wUserRecord:
            Patch(
                'App Users',
                Defaults('App Users'),
                {
                    User: {
                        '@odata.type':"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
                        Claims:"i:0#.f|membership|"& varLoggedInUser.Email,
                        Department: "",
                        DisplayName: varLoggedInUser.FullName,
                        Email: varLoggedInUser.Email,
                        JobTitle: "",
                        Picture: ""
                    }
                }
            )
        },
        Set(varUser, wUserRecord.User);
        Set(varRole, wUserRecord.Role.Value)
    )
);



Now we will display the User’s name and role in the app.



Place a Person icon on the Title bar. Then insert a label beside it with the following code in the Text property:

varUser.DisplayName



Also add a Lock icon to the Title bar. The label beside it should have this code in the Text property:

varRole



Your name and role should now appear in the app. If you want to use the app as another person (example: Jennifer Houston) for testing purposes simply hard-code their email in the app’s OnStart property as shown below.

Set(varLoggedInUser, User());

With(
    {wUserRecord: LookUp('App Users', User.Email="[email protected]")},
    Set(varUser, wUserRecord.User);
    Set(varRole, wUserRecord.Role.Value)
);



Then run the app’s OnStart property to see the changes take effect. Remember to remove the hard-coded employee email before publishing the app.



Filter Records Based On User Role


An employee should only be able to view their own records in the app whereas a manager or an administrator can see all records in the datasource.

Build another SharePoint list called ‘Site Inspections’ with the following columns: LocationName (single-line text), OverallRating (number), InspectionDate (date), InspectedBy (person)

LocationNameOverallRatingInspectionDateInspectedBy
Davenport Building48/5/2020Jennifer Houston
Johnston Terminal58/6/2020Jennifer Houston
Provencher Bridge38/6/2020John Miller
Yoho Ampitheatre58/7/2020John Miller
Union Station38/7/2020Jennifer Houston
Civic Square28/7/2020Alice Lemon



In Power Apps, create a new connection to the ‘Site Inspections’ SharePoint list. After that, insert a gallery onto the screen with ‘Site Inspections’ as the datasource. Format the gallery to display information as shown in the image below using labels, an edit icon and the rating control. Add a label above the gallery to act as a header row.



Jennifer Houston is has the role Employee so she should only see 3 records. Put this code in the Items property of the gallery.

If(
    varRole="Employee", 
    Filter('Site Inspections', InspectedBy.DisplayName=varUser.DisplayName), 
    'Site Inspections'
)



Now she can only view her own records.



Whereas the Manager Sarah Green can see every record.



Give Different Abilities Based On User Role


An Administrator is the only role which has the ability to delete records from the datasource. Add a Delete icon to the gallery as shown in the picture below.



Then use this code in the Visible property of the Delete icon

varRole="Administrator"



The Delete icon will show for the administrator and disappear for employees and managers making it impossible to click.





Questions?

If you have any questions or feedback about designing a role-based user-interface in Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest

37 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Oscar
4 years ago

Learning a lot from you. Thank you for the great article.

Krishna Rachakonda
Krishna Rachakonda
4 years ago

Awesome work Matt. Loved your blog articles always.

I know that you are aware of the following information but for other users, I placing my comments here.

As Power App runs on the user context and if user knows the SP site URL, the user can view/manipulate entire data as we are not trimming the security on SharePoint list.

Here are few recommendations:

  1. Hide SharePoint lists from user visibility in the SharePoint site.
  2. Create a Quicklinks web part with all the links to the lists used in the App and place it on the home page. Set the Quicklinks web part audience targeted to Administrator.
  3. If you want the Power App to be hosted in the SharePoint site, create another SharePoint site and host the app instead of hosting the app in the same site which contains the SharePoint lists.

If this does not help, we definitely need to trim the security on SharePoint list items level, which will degrade the performance of the SharePoint list and Power App. Alternatively, we can use CDS for record level security (it is premium).

Matthew Devaney
4 years ago

These SharePoint list data security recommendations are amazing Krishna. Thank you so much for taking the time to share them!

Your observation is correct: my article only focuses on hiding records to enhance the user experience. Everyone should be paying careful attention to the methods proposed in your comments and enacting them to keep organizational data safe-and-secure 🙂

Clarissa
4 years ago

10/10 as always Matt!

You can also extend this by having a data source where the user can configure the roles different people are allowed to have – so that if people move on / join the company, you don’t need to edit hard values in the app itself, instead you can just refer to the dynamic configuration 🙂

I’ve even hidden entire sections of functionality behind the user-role check, like reporting using embedded Power BI tiles. It adds an extra layer of usability without having to maintain several similar apps. Thanks for sharing for the community! <3

Chivon
Chivon
4 years ago

This is so great! Thank you! Will the role validation work with Groups selected in the SharePoint list?

venkataramana
venkataramana
2 years ago

I am not getting the values for varuser and varRole in my app

Eva
Eva
2 years ago

Grear article, very easy to follow.

@odata.type’:”#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser”,
Claims:”i:0#.f|membership|”& varLoggedInUser.Email, –
where did you get that part from?

carl
carl
2 years ago

I’m not able to display varUser.DisplayName and varRole.Value values in a Label. I manually ran Onstart and see the variables have the correct value in the Variables section. I set the label property Text to “varUser.DisplayName” but it just shows the string “varUser.DisplayName” instead of the value stored in the variable.

Last edited 2 years ago by carl
Priyesh Singh
Priyesh Singh
1 year ago

Carl,

You can use this code its working fine.

Set(varLoggedInUser, User());

Set(varDet,LookUp(‘App User’,User.Email=”priyesh@companyname.com”));

With(
  {
    wUserRecord:varDet
  },
  Set(
    varUser,
    wUserRecord.User
  );
  Set(
    varRole,
    wUserRecord.Role.Value
  );

Steffen
Steffen
2 years ago

Does this tutorial also refer to Dataverse instead of Sharepoint ? Is there another Tutorial how to perform the tasks with Dataverse ? Would be really great 😊

Pooja
Pooja
2 years ago

Thank you for this amazing article Matthew! I am still a beginner to PowerApps. And such simple solutions really help me stay motivated.
I tried the solution in this blog post to access data based on a region. However, a user having 2 regions can only see 1. The table is something like this:
User Region
A FRANCE
B USA
C GERMANY
D SPAIN
D PORTUGAL

User D only sees SPAIN details.
Is there any step that I missed? Would really appreciate your help with this!
Many thanks!

Asheer
Asheer
2 years ago

Dear Matt,

Can I pull the employee, manager and administrator records from SharePoint list instead of O-365? as I have a scenario wherein users are not in Azure AD. Pls advise.

Last edited 2 years ago by Asheer
Juls
Juls
2 years ago

The above worked for me, however when I list multiple If functions in the formula it is unable to filter the information. So, I was trying to have it as

IF(varRole=“Marketing”, IF(VarRole=“Accounting”,If(varRole=“Human Resources”, and so on…

and then the filter function is listed after it. When I tested it out it wouldn’t populate the data in the Gallery. Then when I tested it out with only having one IF function it worked and I was able to see the data for let’s say only Marketing.

Is there a way to fix this issue?

Thank you!

Ferds
Ferds
2 years ago

This is great! But what if the image and the username controls are in a component and shared on several screens? How can I make it work?

Jason502
Jason502
1 year ago

Thanks for all of these great posts! This was a great help for a side-project of mine. I am having an issue. I am having an issue with not being able to get the Role variable to work. I cannot get it to display nor work in Visible control formulas, and everything matches your example, minus my variables are customizes for my situation, as are the column names and values in my SP list. I even gave changing all the variables to match the example, just in case I was missing a typo somewhere.

Any thoughts of what might be a problem I should check?

Bruno
Bruno
1 year ago

Hi Matt, thank you for your amazing work. I’ve been trying to use
If(
varRole=”Reviewer”,
Filter(‘SharePointList’, Reviewer.DisplayName=varUser.DisplayName),
SharePointList
)
But somehow my App does not recognise the Person type column “Reviewer”. In fact it throws me an error. Is there anything else I can try?

Thank you in Advance.
Bruno

Grzegorz C.
Grzegorz C.
1 year ago

man, thank u very much for this post! I have been reading your blog for like 1 month, and i have learned a lot. Amazing work! Nice solutions!

Surendra
Surendra
1 year ago

Awesome work Matt and I want display user roles form office365 group only dynamically so how can i do that

Surendra
Surendra
1 year ago

Is it possible somehow to check the role through Office365User object in the power app(without using a separate sharepoint list)?


fanna
fanna
9 months ago
Reply to  Surendra

wondering if you solved that since i also donot want to mention emails in the SharePoint list but use like a Sharepoint group or security group

Nick
Nick
1 year ago

Hello Matt,

I’m trying to build a power app based off what you’ve done. But when I’m trying to find the user with a matching email, I’m getting an error ” Invalid use of ‘.’ ” where I’m looking up the User.Email and the Role.Value. Am I missing something?

Thanks,

Nick
Nick
1 year ago

How did you get your gallery to display the data like that? I’ve had nothing but issues trying to get the same look.

fanna
fanna
9 months ago

what about using security roles iin power platform for achieving the same. I have not yet been able to understand how to use that.