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

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.

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.

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.

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.

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

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

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

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.

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

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.

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

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

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.

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:

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.

You may like following PowerApps tutorials:

• PowerApps Send an Email on Submit Button
• PowerApps Employee Engagement Survey Example
• Create a PowerApps App from PowerApps template
• How to Customize SharePoint Online List form using PowerApps
• Microsoft PowerApps: Create Login Screen
• Embed PowerApps in Modern SharePoint Online Site Page
• Display SharePoint Online List Columns in multiple screens in Microsoft PowerApps
• PowerApps submit form to SharePoint Online list
• Microsoft PowerApps Radio Button Example
• PowerApps Media Control
• PowerApps upload file to SharePoint Online document library using Microsoft Flow

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.