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!