Hello Folks,
Today in this article we are going to learn about How to customize SharePoint List forms without PowerApps. Customizing the SharePoint List forms is one of the main area for both Developers and business.
In earlier versions of SharePoint Online, there are no ways to customize the SharePoint List forms OOTB. To customize it we may need to use the PowerApps or other third party tools like Nintex Forms. When Microsoft brings the Modern experience to the SharePoint Online, they started to give updates frequently.
With those updates, SharePoint Online received,
- Column Formatting (JSON format to change the look and feel of the column)
- View Formatting (JSON format to change the look and feel of the view)
Finally, with the latest update Microsoft added a new feature called “Form Formatting” (though it is not fully customizable. We can expect more updates in coming future) this is the very fantastic feature to customize the SharePoint list forms.
In all the prior versions of SharePoint, Microsoft recommended us to use other tools to design forms like Infopath, then PowerApps. Now a days the most of the forms are build by using PowerApps. for very small changes we need to use PowerApps, but this is going to be change after an update on Form Configuration.
SharePoint online provides 3 configuration options to customize SharePoint List forms.
- Header
- Body
- Footer
Header- it is used to customize the header section of the form
Body – helps to add the one or more sections and decide the columns on each section. Not allowed to format the section and columns (we can expect these features in coming days).
Footer – It is used to customize the Footer section of the form.
okay, that’s it for theory. Let us see some practical examples.
We are going to customize below form1 into Form 2 with the help of JSON.
Please follow below instructions to customize header in section in SharePoint List Form.
- Click New in SharePoint list to open a NewForm
- Click on edit from icon and Select Configure Layout to open format Panel
- Select Header from Dropdown and select Apply formatting to
- Insert below JSON code to insert the header section.
{
"debugMode": true,
"elmType": "div",
"txtContent": "New Employee Onboarding",
"style": {
"height": "40px",
"font-size": "18px",
"font-weight": "600",
"padding": "10px",
"color": "#fff",
"background-color": "#383794"
}
}
Click on the Preview button to preview the changes. Or click on Save button to apply the change to form.
Add below changes to organize the body section of your form.
In Formatting Section select Body from the dropdown and paste below code in format.
{
"sections": [
{
"displayname": "Employee Name",
"fields": [
"First Name",
"Last Name"
]
},
{
"displayname": "Details",
"fields": [
"Address",
"Phone",
"E-Mail"
]
},
{
"displayname": "Referrence",
"fields": [
"is Referred",
"Referred By",
"Attachments"
]
}
]
}
For now, we can only provide sections and field names in Body section. This helps to split the form in to sections and organize the column in section. If we are not specified any fields, those missed fields gets automatically organize in the last section.
Follow below steps to format footer section.
{
"debugMode": true,
"elmType": "div",
"txtContent": "© ktskumar Portal",
"style": {
"height": "10px",
"color": "#fff",
"font-size": "12px",
"border-top": "5px solid #eee",
"background-color": "#383794",
"padding": "10px"
}
} 
By this way we can change the look and feel of the SharePoint List forms. Shantakumar has written a very good article on this. This process is will help us to understand how to Customize SharePoint list forms without PowerApps.
You may love below of our articles on SharePoint, Please have a look at it.
1 thought on “Customize SharePoint list forms without PowerApps”