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="jennifer.houston@companyname.com")},
    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
7 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Oscar
1 year ago

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

Krishna Rachakonda
Krishna Rachakonda
1 year 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
1 year 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
1 year 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
1 year ago

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

venkataramana
venkataramana
2 months ago

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