In this SharePoint tutorial, we will discuss how to customize SharePoint Modern list form using JSON formatting. In detail, we will see how to customize SharePoint Online modern list forms using JSON.
Microsoft has provided an excellent feature to customize the list/library New/Edit and View form using JSON formatting.
If we need customization in the form level like custom header, footer and body then we can simply use JSON formatting instead of PowerApps or SPFX.
Customize SharePoint Online List form using JSON
Now, let us see step by step how to customize SharePoint Online list form using JSON.
Step 1:
- Go to the SharePoint list or library for which you want to configure the form.
- If you are using a SharePoint list then open an item to view the item details in the display form.
3. At the top of the form, Click New and expand the Edit Form icon and then select Configure layout.
4. In the Format pane, you can choose to apply formatting to the following form section.
- Header
- Body
- Footer
Also, read, SharePoint column formatting examples
Apply JSON in Header
To apply formatting to the header of a SharePoint Online modern list form, select Header in the Apply formatting to dropdown and apply the below code.
{
"elmType": "div",
"attributes": {
"class": "ms-borderColor-neutralTertiary"
},
"style": {
"width": "100%",
"margin-bottom": "15px",
"background-color": "green"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "TextDocument",
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-xl ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover",
"title": "Details"
},
"style": {
"flex": "none",
"padding": "0px",
"padding-left": "10px",
"height": "40px",
"color": "white"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-xl ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "center",
"padding": "21px 12px",
"overflow": "hidden",
"color": "white"
},
"children": [
{
"elmType": "div",
"txtContent": "Custom Header"
}
]
}
]
}
To preview your changes, click the Preview button. If you want to save your changes, click the Save button.
Read SharePoint Online modern list column formatting using JSON
Apply JSON in Footer
To apply formatting to the footer of a modern sharepoint list form, in the Format pane, select Footer in the Apply formatting to dropdown and apply the below code.
{
"elmType": "div",
"style": {
"width": "100%",
"text-align": "left",
"overflow": "hidden",
"border-top-width": "1px"
},
"children": [
{
"elmType": "div",
"style": {
"height": "34px",
"width": "100%",
"color": "#fff",
"font-size": "25px",
"border-top": "5px solid #eee",
"background-color": "red",
"padding": "10px"
},
"children": [
{
"elmType": "a",
"txtContent": "Custom Footer."
}
]
}
]
}
To preview your changes, click the Preview button. If you want to save your changes, click the Save button.
Read How to customize a SharePoint List form
Apply JSON in Body
To apply formatting to the body, in the Format pane, select Body in the Apply formatting to dropdown and apply the below code.
{
"sections": [
{
"displayname": "",
"fields": [
"Title"
]
},
{
"displayname": "Personal Details",
"fields": [
"Name",
"Address",
"Phone"
]
},
{
"displayname": "Work Details",
"fields": [
"Ename",
"EAddress"
]
},
{
"displayname": "Attachments (Note: Submission of Scope of work & Risk Assessment is compulsory) Tick the Relevant boxes below.",
"fields": [
"Attachments"
]
}
]
}
To preview your changes, click the Preview button. If you want to save your changes, click the Save button
Next close and open the form again to view the custom body.
You may like the following SharePoint tutorials:
- SharePoint User Information List
- How to delete all items from SharePoint list
- Power Automate Forms to Excel
- SharePoint Workflow history list URL
- Cascading dropdown in Nintex Forms
In this SharePoint customization tutorial, we learned everything about, sharepoint list form formatting with json. It also answers the below queries:
- sharepoint modern list form json formatting
- sharepoint modern list form json
- sharepoint list form json examples
- sharepoint list form formatting
- sharepoint list form formatting json examples
- sharepoint list form formatting with json
- sharepoint modern list form formatting
- sharepoint modern list form json formatting
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Hello Rajkiran,
Thanks for the great info. Is it possible to change the color of the section headings in the body part? If yes, could you please tell me how to change it?
Thank you…!!!
Amar Hegde
Just change the color in the code.
Hello Rajkiran,
as part of a provisioning process, I’ve already updated a template list accordingly.
Now I’m wondering if I can somehow roll these changes out to existing lists? Would also be important for updating the JSON, if the need arises.
Thank you!
Martin Rupprecht