Customize SharePoint Forms With PowerApps

In this article, you will learn to customize SharePoint Forms with PowerApps.

Overview

We have been quite versed in the classic SharePoint experience. Based on business requirement, 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 times 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 the of form by introducing cascaded dropdowns, hiding few fields based on some business condition.

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 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 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 modern site.

I have 2 lists setup as below:

List# 1: Country

SharePoint

 

List# 2: City

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

SharePoint

 

List# 3: Cascading

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

SharePoint

 

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

    SharePoint

  2. Name your App, click Create

    SharePoint

  3. This will start a process to create the App

    SharePoint
  1. The left section has Browse Screen, Detail Screen, and Edit Screen
  2. Click Edit Screen to see the form

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

    SharePoint
  1. Select Country field. In the Advanced tab, unlock it.

    SharePoint
  1. After unlock, the field properties will be displayed as below

    SharePoint

  2. Select the data card Country and delete it

    SharePoint
  1. This will show a warning sign. Ignore it for now.

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

    SharePoint
  1. The Country field will look as below

    SharePoint
  1. From Properties pane, rename the dropdown

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

    SharePoint
  1. Select the first warning sign for Country

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

    SharePoint
  1. The warning sign should go away.
  2. For City control, select City field in the formula.

    SharePoint
  1. Now, we will attach the values to the dropdown.
  2. Click Data Sources under View

    SharePoint
  1. Click Add data source, click SharePoint.

    SharePoint
  1. Select the SharePoint site
  2. Select the lists – City, Country

    SharePoint
  1. Click Connect
  2. The data sources should be available as City_1 and Country_1

    SharePoint
  1. Select the Country control, set the source as Country_1.Title

    SharePoint 
  1. Select the City control, set the source as City_1.Title
  2. Click File > Save to save your App
  3. Now, we want City to be cascaded based on the Country selection.
  4. Select City control
  5. In the formula, type below formula

    Filter(City_1, Country.Value = ddCountry.Selected.Title)
  1. Click F5 to test your PowerApp

    SharePoint

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 SharePoint form

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

    SharePoint
  1. Select Country and City to add back to form.

    SharePoint
  1. Select Country control, click Advanced.
  2. Click Unlock to change properties.
  3. Set the default value as ddCountry.Selected.Value

    SharePoint
  1. Similarly, set the value for City to ddCity.Selected.Value
  2. Select the Country Card, in properties set Visible = false

    SharePoint

  3. Similarly, Select the City Card, in properties set Visible = false
  4. Once done, delete the original EditScreen1 and rename our EditScreen1_1 to EditScreen1
  5. Rename EditForm1_1 to EditForm1
  6. Click File > Save > Publish

    SharePoint
  1. Click Publish this version
  2. Click Share this app

    SharePoint
  1. Click Add everyone in my org

    SharePoint
  1. Click Save.

PowerApp in Action

  1. Open SharePoint list
  2. From views dropdown select PowerApp

    SharePoint

  3. Click Open

    SharePoint

  4. New items can be added to list from PowerApp

    SharePoint

Summary

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