Customize SharePoint Forms With PowerApps

Overview

 

We have been quite versed in the classic SharePoint experience. Based on business requirements, we create SharePoint lists to store the data by mapping the requirement to corresponding field type in SharePoint (i.e. Single line of text, Multiple lines of text, Number, Choice, etc.). Most of the time creating the list by adding out of box columns does not match the full requirement. To handle this, we have been customizing SharePoint list forms (New / Edit / Display) using JQuery, JSLink, Script Editors. These customizations helped us to enhance the use of form by introducing cascaded dropdowns, hiding a few fields based on some business conditions.

 

Problem statement

 

As we are moving towards developing and using the Modern sites in SharePoint, unfortunately, we do not have more customization control to customize the SharePoint form. Please note, I am referring to the SharePoint list’s New, Edit form as the general term “Form” for this article. Please do not confuse this with InfoPath forms. Microsoft had introduced SPFx (SharePoint Framework) extensions for Field, but it helps to customize the look and feel of an individual field.

 

In the SharePoint modern sites, we can customize the SharePoint forms using Power Apps.

 

PowerApps overview

 

PowerApps is a cloud-based solution. It allows SharePoint forms to work seamlessly on desktops and mobiles (Android and iOS). Using PowerApps, we can utilize SharePoint lists as a data source. PowerApps does not require any custom coding.

 

Create new PowerApp for SharePoint Online List

 

In this article, we will use PowerApp for the cascading in a modern site.

 

I have 2 lists set up as below:

 

List# 1: Country

 

 

List# 2: City

 

City list has a lookup to Country list on the title.

 

 

List# 3: Cascading

Cascading list has Country and City columns as a single line of text

 

 

Using PowerApps, we will set Country and City columns to lookup values from respective lists.

 

Build PowerApp

1. In the Cascading list, click PowerApps > Create an app
    
    
2. Name your App, click Create
    
    
3. This will start a process to create the App
    

4. The left section has Browse Screen, Detail Screen, and Edit Screen
5. Click Edit Screen to see the form
    

6. Click Edit Screen and Duplicate Screen to have a copy as a backup plan
    

7. Select the Country field. In the Advanced tab, unlock it.
    

8. After unlock, the field properties will be displayed as below
    
    
9. Select the data card Country and delete it
    

10. This will show a warning sign. Ignore it for now.
     

11. Again click Country data card, click Insert > Controls > Drop down
     

12. The Country field will look as below
     

13. From Properties pane, rename the dropdown
     

14. Follow the same process from point # 7 to 13 for the City field. The form will now look as below
     

15. Select the first warning sign for Country
     

16. Hit the Delete button to delete it.
17. Perform the same action for City to delete the first warning
18. Click the warning sign for Country. In the formula, the tab selects the name of the SharePoint field.
     

19. The warning sign should go away.
20. For City control, select the City field in the formula.
     

21. Now, we will attach the values to the dropdown.
22. Click Data Sources under View
     

23. Click Add data source, click SharePoint.
     

24. Select the SharePoint site
25. Select the lists – City, Country
     

26. Click Connect
27. The data sources should be available as City_1 and Country_1
     

28. Select the Country control, set the source as Country_1.Title
     
     

29. Select the City control, set the source as City_1.Title
30. Click File > Save to save your App
31. Now, we want City to be cascaded based on Country selection.
32. Select City control
33. In the formula, type below formula
     
    Filter(City_1, Country.Value = ddCountry.Selected.Title)

34. Click F5 to test your PowerApp
     

Please note, these values will not reflect back to SharePoint form, as we have created these dropdowns as our custom controls. We need to add back the SharePoint fields and assign the values of selection to it.

 

Reflect back values to a SharePoint form

1. Click Data Sources and any data card from left.
2. It should display all the available fields.
    

3. Select Country and City to add back to form.
    

4. Select Country control, click Advanced.
5. Click Unlock to change properties.
6. Set the default value as ddCountry.Selected.Value
    

7. Similarly, set the value for City to ddCity.Selected.Value
8. Select the Country Card, in properties set Visible = false
    
    
9. Similarly, Select the City Card, in properties set Visible = false
10. Once done, delete the original EditScreen1 and rename our EditScreen1_1 to EditScreen1
11. Rename EditForm1_1 to EditForm1
12. Click File > Save > Publish
     

13. Click Publish this version
14. Click Share this app
     

15. Click Add everyone in my org
     

16. Click Save.

PowerApp in Action

1. Open SharePoint list
2. From views dropdown select PowerApp
    
    
3. Click Open
    
    
4. New items can be added to list from PowerApp
    
    

Summary

 

PowerApps can be used to enhance the SharePoint forms and can be used by mobile users to access SharePoint lists.