Power Apps - Customizing SharePoint List Forms & Implementing Role Based Security

This blog will show the steps for creating a role based SharePoint List form by customizing the form in PowerApps.

Microsoft recently made a General announced in Nov 2017 for using PowerApp to customize SharePoint forms like back in the days using InfoPath forms.

Customizing a SharePoint form to implement role based security involves the following two steps:

1.                Configuration in Azure
   a.       Register an app with azure
   b.      Generate Keys
   c.       Allocate and Grant required permissions
     2.       Customizations in PowerApps
   a.       Create custom connector with swagger file
   b.      Create power app and utilize the custom connector 

     Step 1 : Configuration in Azure

     Register an app with Azure

·         Login to https://portal.azure.com site and click on Azure Active Directory on the left-hand side menu.

·         Click on App registrations and click on New Application Registration option.

·      Enter the details for Name, Application type, Redirect URI and click on Create button. Redirect URI value should be https://login.windows.net

·         Once the App got created, capture the Application ID and store it locally.

·         Click on settings icon and click on Reply URLs and add https://msmanaged-na.consent.azure-apim.net/redirect and save.

Generate Keys

·         Click on Settings icon, click on Keys.  Add Key Description, Duration and click on Save button. Once you save the key then then Value field will be visible. Copy this value somewhere locally. Once user away from this screen then value will not be visible. 

Allocate and Grant Permissions

·         Click on Settings icon and click on Required Permissions option. Click on Add to add select API as Microsoft Graph API and click on Select.

·         In next screen (Select Permissions), under Delegated permissions check the following items and click on Select button then Done button.

                                                               i.      View User’s basic profile

                                                             ii.      View user’s email address

                                                            iii.      Sign Users In

                                                           iv.      Access Directory As Signed In User

                                                             v.      Read Directory Data

                                                           vi.      Read All Groups

                                                          vii.      Read All User’s Basic Profile

                                                        viii.      Sign in and read User Profile

·         We have defined permissions for the MS Graph API. Now those permissions should be approved by the Administrator, because some of the permissions should be approved by administrator.

·         If you are an administrator then click on Grant Permissions option under Required Permissions.

·         If you are not an administrator then ask your administrator to gran the permissions by login into the azure portal and navigate to below location.

Azure Active Directory à App Registrations à Name of your appàSettingsàRequired Permissions.

Step2  : Customization in Power Apps:

Implementation idea:

From azure AD I am getting all the groups that current user is belongs to. If user is belonging to Test Managers Team, which I have already created as Office 365 group, then we will show the Stock option to edit otherwise it will be read-only. But any user can add stock but only manager will edit the stock value.

Create custom connector

·         Go to https://web.powerapps.com site and login. In the left had side navigation you can find option Custom Connectors. Click on that and click on Create custom connector option in the top right side. Click on Import an Open API file option.

·         I am using swagger file for this demo.

·         Provide custom connector title and upload the swagger file and click on Continue

·         Next screen leave as is and click on Continue

·         In the next screen provide the client id and client secret (Azure app application id and Secret value copied after Key was created) click on continue.

·         Click on Create connector.

·         Once connector created successfully then it will appear as below

·         Click on + symbol to create a new connection.

Create power app with Custom connector

·         Create list in SharePoint site with name Inventory and create below columns

                                                               i.      Stock – Single line of text

                                                             ii.      Category – Single line of text

                                                            iii.      Quantity – Number

·         Go to list settings and click on Form settings. Click on Customize in Powerapps option. This will open power app window to customize.

 ·         Click on SharePointForm1 in the left navigation. 

·         Click on Datasources under view option from ribbon.

·         Click on Add data source and select the newly added custom connector connection. Once we add the data source then it will display like below.

·         I have added some background color, heading and image to give more professional look.

·         Click on FormScreen1 in the left-hand side pane and select the OnVisible property. Apply ClearCollect(MyGroups, Graph.ListUserGroups(User().Email).value) formula to OnVisible property.

·         Above formula will store the retrieved content in MyGroups variable which we called as collection. To see the data which was retrieved by this formula, click on preview or F5 button on keyboard and close the form after form got loaded. Now click on File option then click on collections option.

·         Come back to earlier screen. Click on any field on SharePointForm1 in middle pane and select the required fields. I have selected as below.

·         Select the Stock data card in middle pane and see the properties. Under advanced option click on Unlock to change properties option.

·         Select the Textbox inside Stock field in middle pane and select Display Mode property then apply below formula.

If(IsBlank(Created_DataCard1.Default),Parent.DisplayMode,If("Test Manager Team" in MyGroups.displayName,Parent.DisplayMode,Disabled))

·         Save the form by Ctrl+S and click on Back to SharePoint option in the top left corner.