Power Apps: Customize A SharePoint List Form

Power Apps can be used to customize a SharePoint list form. For example, you might want to change a control type (example: dropdown to radio buttons), add data validation for email addresses, change the form’s size. It can do all of this and more. Form customization used to be done with InfoPath forms but Power Apps is the more modern way to go. In this article I will show you how to design a SharePoint List Form with Power Apps.

Table of Contents
• Introduction: The Job Interview SharePoint List Form
• Setup The SharePoint List
• Open The SharePoint List Form In Power Apps Studio
• Change A Text Input Into A Rating Control
• Set The SharePoint List Form Screen Size
• Perform Data Validation On The Email Field
• Create A Save Button And A Cancel Button
• Test The Power Apps SharePoint List Form
• Revert To The Original SharePoint List Form

Introduction: The Job Interview SharePoint List Form

Managers at a construction company use a SharePoint list to record job interviews and track candidate ratings. When a manager wants to create a new job interview in the SharePoint list they press the new button and a custom Power Apps form appears.

Setup The SharePoint List

Create a new SharePoint list named Job Interviews with the following column

• Title
• CandidateName
• CandidatePhone
• CandidateEmail
• Rating
• InterviewNotes
• InterviewedBy

When a user presses the new button a SharePoint list form appears that looks like this.

Open The SharePoint List Form In Power Apps Studio

Go the the Job Interviews SharePoint list and select the Integrate button from the menu. Choose Power Apps then Customize Forms.

The SharePoint list form will appear in Power Apps Studio. We can use Power Apps to modify the form however we like.

Change A Text Input Into A Rating Control

By default a number type column will appear as a text input in the SharePoint list form. We want to delete the text input control for the Rating column and replace it with a rating control. Select the Rating text input (in this case DataCardValue4) and click the icon to unlock it.

Remove the Rating text input.

Add a new rating control to the card in its place.

Use these values in the X and Y properties of the rating control to position it where the text input was previously.

X: 32
Y: DataCardKey4.Y + DataCardKey4.Height + 5

Next, we must indicate what number value to write to the SharePoint list based on the number of stars chosen in the rating control. Select the data card for the rating field.

Then change the Update property to this value.

DataCardValue4.Value

Also, use this code in the Default property to ensure the property rating appears when editing an item.

Parent.Default

Set The SharePoint List Form Screen Size

The SharePoint list form is too long to fit all of its fields on the screen at once. We can solve that problem by making the form wider and changing it from a 1 column layout to a 2 column layout. Open the Power Apps Settings menu.

Go to Display. The default value for Orientation is Portrait and the size will be Large.

Change the Orientation to landscape instead. Confirm your decision when Power Apps warns that the app’s design could be affected by switching orientation.

Reposition the SharePoint list form so it fits on top of the newly resized screen.

Use this code in the Height and Width properties of the form to make it cover the screen.

Height: App.Height
Width: App.Width

While selected on the SharePoint list form change the Columns property to 2 and the leave the Layout property as vertical.

Now that the form has been redesigned it can shows all of its fields on the screen without scrolling.

Perform Data Validation On The Email Field

We want to ensure all emails entered into the SharePoint list form are valid and follow the format [email protected].

Use this code in the OnSave property of the SharePointIntegration object. The IsMatch formula checks if the Candidate Email text input (DataCardValue3) contains an email. If the validation fails the user sees an error message when they try to save the form.

If(
    IsMatch(DataCardValue3.Text, Match.Email),
    SubmitForm(SharePointForm1),
    Notify("Candidate Email does not follow the format [email protected]")
)

Create A Save Button And A Cancel Button

The original SharePoint list form had a Save button and a Cancel button at the bottom of the form. We should recreate those in the PowerApps form as well. Insert a new button onto the screen with the text Save.

Use this code in the OnSelect property of the save button to submit the form.

SubmitForm(SharePointForm1)

Make another button with the text Cancel beside the Save button.

Write this code in the OnSelect property of the cancel button to reset the form. Then use the RequestHide function to close the form.

ResetForm(SharePointForm1); RequestHide()

Style the cancel button to have a white fill with blue text and borders using this code.

BorderColor: RGBA(0, 120, 212, 1)
BorderStyle: BorderStyle.Solid
BorderThickness: 2
Color: RGBA(0, 120, 212, 1)
Fill: Color.White

We are now done creating the SharePoint List Form in Power Apps. Save & publish the app.

Test The Power Apps SharePoint List Form

Go to the SharePoint list and press the new button to make the custom SharePoint list form appear.

Fill-in the SharePoint list form with some data and press the Save button.

The new record will show in the SharePoint list.

To edit a list item, select it and press the Edit button.

Its data will be shown in the SharePoint list form.

Revert To The Original SharePoint List Form

If we change our minds and want to use the original SharePoint list form again we can do so. Open the SharePoint list settings and select Form settings.

Choose Use the default SharePoint form then press OK.

The original SharePoint list form will now appear instead of the Power Apps custom form.

Questions?

If you have any questions or feedback about Power Apps: Customize A SharePoint List Form 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.