How to Customize SharePoint Online List form using PowerApps

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 list forms.

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

Example-1: Change Layout of SharePoint online List form using PowerApps

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.

customize sharepoint list form using powerapps

customize sharepoint list form using powerapps

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.

customize sharepoint list forms with powerapps

customize sharepoint list forms with powerapps

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“.

powerapps custom forms
customize sharepoint list forms with powerapps

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. 

sharepoint powerapps forms
powerapps snap to 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.

sharepoint powerapps tutorial
powerapps layouts

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.

sharepoint online custom list form
powerapps hide fields

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

If(DataCardValue3.value==true,true)

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.

create a form in powerapps
powerapps conditional fields

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.

customize sharepoint online list form using powerapps
customize sharepoint online list form using powerapps

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.

customize sharepoint online list form with powerapps
customize sharepoint online list form with powerapps

When we disable the BookDetails field, then the BookAuthor and BookAvailability will hide in the SharePoint online list.

customize sharepoint list form with powerapps
customize sharepoint list form with powerapps

Example-2: Add image in SharePoint List form using PowerApps

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.

customize sharepoint list forms with powerapps
powerapps image control

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.

powerapps custom forms
powerapps picture

I have added the below image in the SharePoint online list form from the local System using PowerApps designer page.

sharepoint powerapps tutorial
powerapps upload image to sharepoint list

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.

powerapps custom forms
powerapps change color

Example-3: How to Customize SharePoint online list When new item Added to the list and Edit the list item using PowerApps designer page

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.

sharepoint powerapps forms
custom sharepoint forms with powerapps

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”.

sharepoint powerapps tutorial
Add duplicate screen in PowerApps

In the below screen shot I have renamed the duplicated form as “NewScreen” in the PowerApps designer page.

sharepoint powerapps forms
PowerApps rename the Screens

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.

create a form in powerapps
PowerApps add button controls

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.

sharepoint powerapps tutorial
PowerApps Edit multiline Text

Below the “Screens” in the Search bar find the “SharePointIntegration” in the PowerApps designer page. In the right side, box Click on Advanced settings.

customize SharePoint list forms with PowerApps
customize SharePoint list forms with PowerApps

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.

customize sharepoint list forms with powerapps
PowerApps action rule

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). 

sharepoint powerapps tutorial
PowerApps change the OnEdit Rule

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.

powerapps custom forms
powerapps submit form to sharepoint list

Again open the PowerApps designer page.In the Advanced modify the rule “EditForm(NewForm);Navigate(NewScreen,ScreenTransition.Cover)“.

sharepoint powerapps forms
powerapps action rules

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.

create a form in powerapps
powerapps forms sharepoint

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)”.

sharepoint powerapps forms
custom sharepoint forms with powerapps

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.

customize sharepoint list form using powerapps
customize sharepoint list form using powerapps

You may like following SharePoint customization tutorials:

Conclusion:

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

  1. How to Add image in the Existing SharePoint online list form using PowerApps designer page.
  2. How to display the SharePoint online list field in multiple columns and how to change the SharePoint online List form layout using PowerApps.
  3. How to customize the New form of SharePoint online list and Edit form of SharePoint online list using PowerApps.
>