Customize New Form, Edit Form, And Display Form In Modern SharePoint Page Using PowerApps

This article covers step by step guidelines to customize New Form, Edit Form, and Display Form in Modern SharePoint Page. We will use the PowerApps approach to customize the forms.

Overview

Nowadays, people are using Modern SharePoint Pages for their sites. Earlier, when we were using the classic layout, it was very easy for the end-users to inject the JavaScript code within the page and design a new form, edit a form and display the forms. With the modern SharePoint pages, we can’t inject JavaScript and customize the OOTB form. In order to customize the Modern SharePoint Form, we need to use the PowerApps.

Let’s get started with the customization using PowerApps.

Problem Statement

We have a Holiday List to apply for the leave. The list has the following columns, as shown in the below screenshot. We want to customize the form for the holiday list.

 Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps

Let’s get started.

Step 1

Open the List and from PowerApps, select "Customize Forms".

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

Step 2

It will redirect you to PowerApps Studio.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

Step 3

The first important step we need to perform is to uncheck the option “Snap to Grid”.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

The “Snap to Grid” option is very important while you are customizing a very complex form. Here, you can select the fields based on your requirement.

Step 4

Now, let’s change the size of the canvas. To change the screen size, click on the File menu.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

From "App Settings", select Screen size.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

We will select Portrait mode with Large size.

Based on the requirement, we can select the Landscape orientation too.

Step 5

Now, let’s edit the card. In PowerApps, every field is considered as a card.

A card has the following four default items.

  • Star Visible
  • Error Message
  • Data Card Value
  • Data Card Key

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

To edit any property of the card, first, we need to unlock the card.
 
Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

To edit the card, select any card. From advanced, click "Unlock to change properties".

Step 6

We have modified the form based on our requirement. Let’s apply the background color for the form.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

Step 7

Once the form is created successfully, we need to set the default mode for the form.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps

In order to do that, select the Form. From Properties, select Default Mode as New, so whenever you click on the New button, it will open your newly customized form.

Step 8

Once the form has been created, it is time to save and publish our changes.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

Save the PowerApps form and publish the changes.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

Step 9

Now, let’s test the form. Click on the "New" button. It will open the following New Form.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 
 
In the same way, the following screenshot shows the Edit mode of the form. 
 
Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

The below screenshot represents how a form is displayed.

Customize New Form, Edit Form and Display Form in Modern SharePoint Page Using PowerApps 

This is how we can customize our modern SharePoint Forms.

Conclusion

This is how we can customize our New, Default, and Edit form in modern SharePoint page using the PowerApps approach without writing a single line of the code. Isn’t it amazing? Stay connected with me for more amazing articles!

Happy SharePointing!!