In this SharePoint article, we will learn how to customize SharePoint online List form using PowerApps designer page. Previously we were using InfoPath for more customization of existing SharePoint online list form. In SharePoint Online modern sites we can use Microsoft PowerApps to customize
Here I am going to show some example of how to customize the SharePoint online existing list form using PowerApp designer page.
If you are new to Microsoft PowerApps, read an article on: Create your First form using Microsoft PowerApps in SharePoint Online
SharePoint Online tutorial contents:
In this example, we will discuss how to display the SharePoint online list form in two columns, Change the Layout of the SharePoint List form using PowerApps. We will see how to disable the fields of List form using PowerApps designer page.
Check Out Microsoft PowerApps and Flow Training Course (Lifetime Access)
I have created a new SharePoint online Custom list and named as “SharePointBooksInformation”. When user want to add new items in the list they can able to see the below field (Title and Attachments) by default.
I have added some of the columns in the “SharePointBooksInformation” SharePoint online list form. The columns are:
- BooksName (SignleLineOfText)
- BooksDetails (YesOrNo)
- BooksPrice (Currency)
- BookAuthor (Choice)
- BooksAvailability (Date and Time)
We want a little bit customization in the list form. So go to SharePoint online list in the modern look and feel. Go to PowerApps designer page from the ribbon of SharePoint online list, click on Customize form which comes under “PowerApps” option.
In the center of PowerApps designer page, we can able to see our SharePoint online list form. In the Data pane, we can able to see “Snap to columns“, “Layout” and ” Fields“.
Snap to columns: In the Snap to column option of PowerApps designer page, we can able to see a number from the drop-down. Here I have selected from the drop-down “2”. So we can able to see the SharePoint online list field in two columns.
When we Save the form and open in SharePoint list we can able to see the List form in two columns.
Layout: We can also, change the layout from vertical to horizontal in the PowerApps designer page. Here I have changed the Layout from vertical to horizontal.
We can disable the field from the fields which we do not want to display in the SharePoint online list form using PowerApps designer page. Here I have disabled the “Title” and “Attachments” because I do not want.
One more thing I want to show you here when the user enables the “BookDetails” fields in SharePoint online list form, then the user can able to see “BooksPrice, “BookAuthor” and “BooksAvailability” fields.
Select theBooksPrice field and Select the “Visible” property. In the formula bar set the formula to
The DataCardValue3 is the value of “BookDetails”. Like theBooksPrice, I have set the rule for “BookAuthor and “BookAvailability” columns of SharePoint online list using PowerApps designer page, When we enable the BookDetails we can able to see BookAuthor and BookAvailability otherwise we can not able to see the BookAuthor and BookAvailability field.
In the below screenshot we can able to see the “BookDetails” button is set to false so the BookAuthor and BookAvailability is not displaying in the PowerApps designer page.
Save the form and Open in The SharePoint online List. I have open the SharePoint online list and when I want to Add new item we can able to see the new form which I have changed in the PowerApps designer page.
When we disable the BookDetails field, then the BookAuthor and BookAvailability will hide in the SharePoint online list.
I have created one more SharePoint online list and go to the PowerApps designer page. In the PowerApps designer, the page goes for Insert “Media” and Click on Image. We can able to see the image control in the form.
Go to the Properties click on Select an Image we can able to see “Add an Image File“.Here we can add the image from our system.
I have added the below image in the SharePoint online list form from the local System using PowerApps designer page.
To change the form color in the PowerApps designer page, choose the property “Fill” and in the formula bar, I have added the color code. Here I have drag the pic to Top of SharePoint online List form.
I have created one SharePoint online list “OrganizationEmployeeInformation” and added some of the column “EmployeeName”, “EmployeeDepartment”, “EmployeeAddress”, “EmployeeEmail”, “EmployeeSalary” and “ManagerReview”.
In this example, we will see how we can set different form for SharePoint online list edit form and new form using Microsoft PowerApps designer page.
Below one is my PowerApps designer page where we can able to see the SharePoint online List form. I want to add the ManagerReview field but not in the same form, in the other form.
To add one more list form which is having the same list field like previous list form(old form) so go for the duplicate screen. Click on the screen which is created by default when we open the SharePoint online list form in the PowerApps designer page. I have renamed the list form as “Old Form” and duplicated form as “NewScreen” and “NewForm”.
In the below screen shot I have renamed the duplicated form as “NewScreen” in the PowerApps designer page.
In the old screen, I have added one button in the PowerApps designer page. For the button control I have selected the Property “OnSelect” and in the formula bar, I have added the formula as SubmitForm(oldform)columns user give the field value and Click on Submit button then the item stored to the SharePointonline list.
In the duplicate screen of PowerApps designer page, I want to Add the ManagerReview field with multiline of text. So from the Data Pane enable the ManagerReview field and click on “…” we can able to see “Edit multiline Text”. Click on “Edit Multi-line text” to make the “ManagerReview” field to multiline in the PowerApps designer page.
Below the “Screens” in the Search bar find the “SharePointIntegration” in the PowerApps designer page. In the right side, box Click on Advanced settings.
In the Advanced tab of “SharePointIntegration” in the PowerApps designer page, we can able to see “OnNew”, “OnEdit”, “OnView”, “OnSave”, “OnCancle”. That means in the “OnNew” when the user is trying to add new items to the SharePoint online list they can able to see the “OldForm”. Like that, for Edit SharePoint online list we will see the “OldForm”, that means on user edit the list form, then the “OldForm” is showing in the ShaarePoint online list.
Suppose we want to see the duplicated form(NewForm) in the edit form of the SharePoint online list, what the things we should do. Here we need to change the formula EditForm(OldForm) to EditForm(NewForm).
Save the form using PowerApps designer page and open in the SharePoint online list. We can able see list edit form is not navigated to new form still old form is opening. So our rule is not correct.
Again open the PowerApps designer page.In the Advanced modify the rule “EditForm(NewForm);Navigate(NewScreen,ScreenTransition.Cover)“.
Now Save the SharePoint online List form on the PowerApps designer page and open the list form in the SharePoint online. Now we can able to see the “Manager Review” in the Edit form that means the new form is navigating in the SharePoint list.
But when we are trying to add a new item to the SharePoint online list we can able to see the new form, that means this form is same as the Edit form. So to change the OldForm, open the PowerApps designer page in the advanced “OnNew” add the rule “NewForm(OldForm);Navigate(OldScreen,ScreenTransition.None)”.
After modifying the rule Save the form in the PowerApps designer page and open in the SharePoint online, We can able to see the old form when we are trying to add a new item to SharePoint online list.
You may like following SharePoint customization tutorials:
- Create a PowerApps App from PowerApps template
- PowerApps Send an Email on Submit Button
- How to Customize SharePoint Online List form using PowerApps
- Microsoft PowerApps: Get Current Logged In User Details like Email ID, UserName in SharePoint Online
- Microsoft PowerApps: Create Login Screen
- SharePoint Online Modern List: Explore 11 New Features
- SharePoint framework development tutorial: Configure SharePoint Framework development environment + Create your first SharePoint client-side web part
- Working with InfoPath form library SharePoint 2013/2016/Online
- Customize list view using
jslinkin SharePoint 2013/2016/Online
- SharePoint 2013
jslinklist view examples: Add header and footer to list view web part using JSLink in SharePoint Online/2013/2016
In the above article, we were discussed how to add more customization the SharePoint list form using PowerApps designer page. We have discussed 3 below examples that is
- How to Add image in the Existing SharePoint online list form using PowerApps designer page.
- How to display the SharePoint online list field in multiple columns and how to change the SharePoint online List form layout using PowerApps.
- How to customize the New form of SharePoint online list and Edit form of SharePoint online list using PowerApps.
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com