Customize SharePoint List Forms Using PowerApps

We are all aware Microsoft announced that there will be no new release for InfoPath and advised us to start using PowerApps instead of InfoPath.

The long awaited feature to create custom SharePoint list forms with PowerApps has been released now. This only exists in the SharePoint Modern Experience, so you won’t get this in classic.

In this article, I will explain how to customize SharePoint Online List Forms using Power Apps and show you how easy it is.

First let’s try to understand what PowerApps is all about.

What is PowerApps?

PowerApps is a software to build custom business applications without writing single line of code. It’s designed to work with a number of different sources. You can create, manage and share business apps on iOS, Android and Windows devices.

Let’s start to customize SharePoint List Forms using PowerApps

PowerApps Forms is directly integrated to the SharePoint List Modern UX. Using the modern experience, I’ve created a new SharePoint list called Time Off Request with some fields such as Leave Date, Reason, Leave Status, Manager Email, Approvers Comment.

We want our forms to be pretty, or more importantly to better represent the look and feel.

Now I’ll go ahead and select PowerApps -> Customize Forms

This will take you to PowerApps studio to build the form.

Once you are landed in PowerApps console, here are a couple of things to notice.

By default, your app will only have one screen (SharePointForm1).
On the Top Back to SharePoint
On the left, click SharePoint Integration, and on the right, click Advanced.

These settings above are where you can determine what happens when the form is edited, created, or opened from the SharePoint list.

Hiding Fields in SharePoint List Forms

One common scenario is that you might want to show or hide different fields depending on whether the user is creating a new item or editing an existing one.

In our scenario, we have a simple Time Off Request form. The requester will fill out fields on when they are going to take leave. The approver will edit the form and fill in comments and mark it as approved. The requester shouldn’t see these fields.

Let's say we have Leave Status, Approver Comments that you don't want visible. Hiding the field is easy in PowerApps - in the property options, just select the field and turn off the visibility

Or just clear the Field Check Box that you don’t want to show

Finally, your form looks like below

Customize your List Form

Now it’s time to change the background color, Format the Text, Size and orientation, Add images or charts,

Background Color Change
You can Fill colors and there are PowerApps themes that you can use to enhance the look and feel of the application to make it look very professional in a couple of clicks.

Select Theme and choose from one of the out-of-the-box themes.
Font Style
To change the Font Color, Select the label and apply the color
Layout Change
To make it two level column layouts, Click Snap to Columns under Data Section and set the value as 2

Two level column layout looks like below
Adding images to your Form
If you want to add some images to the form, Go to Media ->Image

Click on Add an image file

Saving and publishing to SharePoint

Once everything is done, To make it visible to all users, click File -> Save, then Publish to SharePoint.

View your List Form in SharePoint

You can now go back to your list and go to the new form. You will see it now embeds nicely into a side-pane for the list.

Make Power App Forms as Default Form

To make it as default form Go to SharePoint List Settings -> Form Settings

You will see the new option to select the forms from InfoPath or from PowerApps as below.

Click OK.

Summary

Now, I hope you have some idea about how to customize SharePoint List forms using PowerApps. We will see more on Adding Custom Data Validation/ Adding Rules and Creating Additional Views in the upcoming articles.

Thank you for reading!

6 Comments

Join the conversation! Your thoughts help the community grow.

Otah Thotho4y ago
Thank you for sharing. Is it possible to use Powerapps on a classic SharePoint list? Create a form in Powerapps and open it on Classic Sharepoint.
Almaze hailu7y ago
Thank you for sharing and explaining it clearly
Ramakrishna Basagalla7y ago
Good One, very useful
Vinod Kumar8y ago
Good one. Is it possible to use jquery in Power apps for custom validation?
Dinesh DDStar8y ago
Super.....................................
Vinodh Narayanan8y ago
Good one thanks for sharing all the best keep going