Customize SharePoint List form using PowerApps

In this Microsoft PowerApps tutorial, I will show, how to create different SharePoint list forms using PowerApps, like edit form, new form, and display form. Also. we will see how to customize SharePoint list forms using Microsoft PowerApps.

Check Out Microsoft PowerApps and Flow Video Training Course (Lifetime Access)

For better understanding, I have taken a straightforward example. I have created one SharePoint Online custom list named “PurchaseOrder” and create a few columns like below:

  • PO (number)
  • OrderDate (Date and Time)
  • VendorName (Person or Group)
  • OrderStatus (Choice)
  • Total (Currency)

The SharePoint Online list columns looks like below:

customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

Customize SharePoint List form using PowerApps

Now we will see how to customize SharePoint list forms using PowerApps.

Remember PowerApps customization Option is available in only SharePoint Online modern list or libraries, it is not available if you are using SharePoint classic experience like classic list or document library.

From the command bar in SharePoint Online modern list, Click on the PowerApps -> Create an app -> Customize forms.

Create an app option is for creating a new PowerApps in the “SharePoint online list” and Customize forms is to customize the SharePoint online list form. Go for the “Customize forms” option.

Customize SharePoint List form using PowerApps
customize sharepoint list form using powerapps

Now the PowerApps designer page will open where we can customize our SharePoint Online list forms.

Below screenshot is the PowerApps designer page, we can able to see our SharePoint list, from here where we can customize the form.

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

Create SharePoint online list edit, new and view form using PowerApps

Go to the FormScreen1 and right-click on it and add two duplicate screens in the PowerApps form. In the below screenshot I have already added two duplicated screen.

powerapps custom forms to look more like infopath
powerapps custom forms to look more like infopath

Rename all the three screens. I have renamed all the 3 PowerApps screens as “ScreenView“, “ScreenEdit” and “ScreenNew“.

Like that, I have renamed the form as “FormView“, “FormEdit” and “FormNew” in the PowerApps form.

customize sharepoint form in powerapps
customize sharepoint form in powerapps

Select the “FormNew” and change the DefaultMode as “View” which is present in the left panel.

The Default mode option we can see in the “Properties” tab. Like that select the “FormEdit” and change the default mode as “Edit”.

Set default mode New for the “FormNew” from the PowerApps designer Properties option.

customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

Select the SharePointIntegration from the left panel of PowerApps designer page. In the Right panel select the “Advanced”. In the Advanced option, we will see “OnNew”, “OnEdit”, “OnView”, “OnSave”, “OnCancel”.

customize-sharepoint-list-forms-with-powerapps
customize-sharepoint-list-forms-with-powerapps

I have added the rule on “OnNew”:

Set(SharePointFormMode,"CreateForm");NewForm(FormNew);Navigate(ScreenNew,ScreenTransition.None)

On “OnEdit”:

Set(SharePointFormMode,"EditForm");EditForm(FormEdit);Navigate(ScreenEdit,ScreenTransition.None)

On”OnView”:

Set(SharePointFormMode,"ShowForm");ViewForm(FormView);Navigate(ScreenView,ScreenTransition.None)

On “OnSave”:

If(SharePointFormMode="CreateForm",SubmitForm(FormNew),If(SharePointFormMode="EditForm",SubmitForm(FormEdit)))

and On “OnCancel”:

If(SharePointFormMode="CreateForm",ResetForm(FormNew),If(SharePointFormMode="EditFoem",ResetForm(FormEdit))) 
customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

Customize SharePoint online List forms using PowerApps

Select the “FormView” form add go to the Icons bar which comes under “Insert”. Select one rectangle icons from the icons bar in the PowerApps form page.

customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

Add one Label from the PowerApps Insert tab in the rectangle icon.

customize sharepoint form in powerapps
customize sharepoint form in powerapps

Change the Text property of the label “PurchaseOrderDetails”. I have to change the text color white here.

To change the Color go to the Property drop-down select the color and in the PowerApps formula bar write “White” for white color text.

custom sharepoint forms with powerapps
custom sharepoint forms with powerapps

For the PowerApps Edit screen also I have added one rectangle and label. I have to change the text “PurchaseOrder Edit Item Screen”.

powerapps custom forms
powerapps custom forms

Select the “ScreenNew” and add the label and rectangle icon like “ScreenEdit” and “ScreenView” and change the text property “PurchaseOrder NewItem Screen” in the PowerApps form.

customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

Now Save the PowerApps form to the SharePoint online list. Go to File tab. Click on Save to save the customized PowerApps form.

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

After the form save click on “Publish to SharePoint” to save the PowerApps form to the SharePoint online list.

powerapps custom forms to look more like infopath
powerapps custom forms to look more like infopath

Now Open the SharePoint online “PurchaseOrder” list. Click on an existing item to see the view. We can able to see our SharePoint Online list view form is customized now using PowerApps.

customize sharepoint form in powerapps
customize sharepoint form in powerapps

Open the SharePoint online list edit form we can notice our Edit form also customized using PowerApps and the PowerApps form will open like below:

custom sharepoint forms with powerapps
custom sharepoint forms with powerapps

Below Screenshot is our SharePoint online modern list Add new item screen. The Add item screen looks different because we customize it using the PowerApps designer page.

customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

You may like following PowerApps tutorials:

In the above PowerApps article, we were discussed how to create a new form, edit form, and view form in the PowerApps designer page. We saw how to customize the SharePoint Online modern list new form, edit form, and view form and how to customize SharePoint list form using PowerApps.

  • Thank you very much! The SharePoint integration part was very important in my situation and it took me quite some time to find this solution. Other solutions I found didn’t mention that part.

  • Great tutorial. I have a problem, just as I click on the PowerApps -> Create an app -> Customize forms, the form opens with a yellow warning icon on top in the formula If(IsBlank(SharePointIntegration.Selected) || IsEmpty(SharePointIntegration.Selected),First([DATABASE NAME]),SharePointIntegration.Selected), saying: “Delegation warning: The highlighted part on this formula might not work correctly on large datasets. The “First” Operator is not supported for this connector.

  • >