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

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.



Let’s get started.


Step 1

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



Step 2

It will redirect you to PowerApps Studio.



Step 3

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



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,