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
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.
Also, use this code in the Default property to ensure the property rating appears when editing an item.
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@example.com.
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 firstname.lastname@example.org") )
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.
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.
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.
Did You Enjoy This Article? 😺
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
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.
hey there Mr. Matt! For the part two, or a supplement, perhaps some notes or guidance on the limitations to forms (solutions, printing, etc.) as some folks might construe or take for granted some abilities that are actually not allowed or must be handled differently 🙂
Hello Mr. Ralph 👋
It’s a good callout. I think the best place to do this might be a limitations section at the bottom of this article
Great blog for any newbies
Question:if we want to use the link to this form at the homepage of the SharePoint site in the call to action webpart;I want when user clicks the link it takes them to the list powerapps form and upon save or cancel it should return to the home page instead of SharePoint list
Any thoughts on that.Thanks!!
I don’t know much about SharePoint web parts. Let’s see if someone else can respond with the answer.