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
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 the 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 the City field. The form will now look as below
    SharePoint
  1. Select the first warning sign for Country
    SharePoint
  1. Hit the 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, the tab selects the name of the SharePoint field.
    SharePoint
  1. The warning sign should go away.
  2. For City control, select the 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 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 a 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.