How to Customize Modern SharePoint List Form Using JSON Formatting?

A client has reached out to us regarding one of his requirements for tracking ‘Project Management’ details on the SharePoint site. They wanted us to design a custom SharePoint list form layout, including different types of list views with project status to be displayed on the SharePoint site page, as well as a Gantt chart view of Project tasks.

To configure the SharePoint Online list form layout, we can use JSON formatting instead of Power Apps or SPFX.

This tutorial will guide you through customizing a Modern SharePoint list form using JSON formatting. In detail, you’ll learn:

• Configure Custom Header Section in Modern SharePoint List Form
• Customize Modern SharePoint List Body Layout with Different Sections
• Design a SharePoint Online List Form Footer by JSON

Configure Modern SharePoint List Form using JSON

You can apply JSON formatting to the SharePoint Online list form to build the custom Header, Footer, and Body with one or more sections.

It does not modify data in a SharePoint list or file; it only alters the appearance of the list form to users browsing the list or library.

Steps to apply JSON formatting to a SharePoint list/library:

1. Go to the modern SharePoint list or library for which you want to configure the form. In my case, I was customizing the SharePoint list form.
2. If you are using the SharePoint list, click on the +Add new item button. Otherwise, open the item to show its details in the display form.

3. Then, the display form will open up. Expand the Edit Form icon and then select the ‘Configure layout‘ option.

4. In the Format pane, you can choose to apply formatting to the following form sections.
   • Header
   • Body
   • Footer

Now, let’s see how to apply json formatting to the Modern SharePoint list form to configure the Header, Body, and Footer sections.

Example 1: Configure Custom Header with Title Column Value

By default, the SharePoint list form will look like the image below, with a one-column layout:

You can add a custom header to your modern SharePoint list form by applying json formatting to the Header section with the quick steps below.

1. On the Format pane of the SharePoint list/library form, select the ‘Header‘ option in the Apply formatting to dropdown.
2. Paste the JSON code given below in the Formatting code box.
3. To preview your changes, click the Preview button. To save your changes, click the Save button.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "20px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Project Status Details: ' + [$Title]"
                }
            ]
        }
    ]
}

Output:

Example 2: Configure SharePoint List Form Header with Background Color and Title

In this example, you can format the background color of the modern SharePoint list form header section. Also, you can include a Title for the list form header with an icon.

Follow the steps mentioned in the above example to apply the JSON code to the list form Header.

Paste the code in the JSON text input area and click on the Save button.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "100%",
        "margin-bottom": "20px",
        "background-color": "black"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "customlist",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-xl ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover",
                        "title": "Project Status"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0.1px",
                        "height": "20px",
                        "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": "12px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Project Status"
                }
            ]
        }
    ]
}

In the code above, you can replace the title name and icon Name according to your preference.

Output:

Example 3: Customize Modern SharePoint List Form Body Layout with Different Sections

The SharePoint list form body configuration allows you to divide the Body into one or more sections by adding one or more list columns to those sections.

Note:

• One or more sections can be added into body.
• Each section can display one or more columns in the list/library.
• If a column is added in multiple sections, the column will be displayed in the first section ignoring others.
• If the column is not added in any of the section, automatically it will add to last section.
• New columns will be automatically referenced in the last section.

Steps to apply formatting to the SharePoint Online list Body form:

1. On the Format pane, select ‘Body‘ from the ‘Apply formatting to‘ dropdown.
2. In the Formatting code box, paste your custom JSON code body formatted. Click the Save button.

{
    "sections": [
        {
            "displayname": "",
            "style": {
                "background-color": "#FAD7A0"
            }
        },
        {
            "displayname": "New Project Status",
            "style": {
                "background-color": "#f8e4d6"
            },
            "fields": [
                "Week Ending",
                "Current Project Finish Date",
                "Current Phase",
                "Percent Complete"
            ]
        },
        {
            "displayname": "",
            "style": {
                "background-color": "#FAD7A0"
            },
            "fields": [
                "Overall Health Indicator",
                "Time Indicator",
                "Resources Indicator",
                "Scope Indicator"
            ]
        },
        {
            "displayname": "Initiative Status - Executive Summary:",
            "style": {
                "background-color": "#D5F5E3"
            },
            "fields": [
                "Major Accomplishments (since previous report)",
                "MajorActivitiesPlanned"
            ]
        },
        {
            "displayname": "Project Issue Summary & Risk:",
            "style": {
                "background-color": "#F5B7B1"
            },
            "fields": [
                "Major Unresolved Issues",
                "Project Risk (s) identified (Active)"
            ]
        }
    ]
}

Output:

Example 4: Configure Custom Message in SharePoint List Form Body

In this section, I will show you how to customize the modern SharePoint list body form with a notification message.

Scenario:

Within the ‘Project Status‘ list, there is an Overall Health indicator column that has the choice values like [Green, Yellow, and Red] that indicate project tracking status.

Now, I wanted to display a notification message in the body section to indicate what the color value means.

Inside the Formatting code box, paste the JSON provided below. Then, click on Save to apply changes to the SharePoint list form.

{
    "sections": [
        {
            "displayname": "🟢 GREEN: Project is on-track and no leadership action is required | 🟡 YELLOW: Warning indicator,It may not require leadership involvement, but they should be aware for closer observation | 🔴 RED: Project experienced serious issues, and may require leadership intervention to help correct something.",
            "style": {
                "background-color": "#FAD7A0"
            }
        },
        {
            "displayname": "New Project Status",
            "style": {
                "background-color": "#f8e4d6"
            },
            "fields": [
                "Week Ending",
                "Current Project Finish Date",
                "Current Phase",
                "Percent Complete"
            ]
        },
        {
            "displayname": "",
            "style": {
                "background-color": "#FAD7A0"
            },
            "fields": [
                "Overall Health Indicator",
                "Time Indicator",
                "Resources Indicator",
                "Scope Indicator"
            ]
        },
        {
            "displayname": "Initiative Status - Executive Summary:",
            "style": {
                "background-color": "#D5F5E3"
            },
            "fields": [
                "Major Accomplishments (since previous report)",
                "MajorActivitiesPlanned"
            ]
        },
        {
            "displayname": "Project Issue Summary & Risk:",
            "style": {
                "background-color": "#F5B7B1"
            },
            "fields": [
                "Major Unresolved Issues",
                "Project Risk (s) identified (Active)"
            ]
        }
    ]
}

Output:

Example 5: Customize SharePoint List Form Body in Two Column Layout

SharePoint JSON can only configure the custom body into one or more sections. Customizing the list form body will switch the list or library form layout from single column to a multi-column layout.

Note:

By default, the JSON formatting will divide the form into a three-column layout.

The screenshot below shows the SharePoint list form with a single column layout:

I now want to display this SharePoint form body section in a two-column layout.

To show only two columns in the Body, we can add only two fields per section.

The JSON code below has each section with two fields. Copy and paste this code into the Formatting code box and click on the Save button.

{
    "sections": [
        {
            "displayname": "Project & Task ID",
            "fields": [
                "ProjectID",
                "Task ID"
            ]
        },
        {
            "displayname": "Task Details",
            "fields": [
                "Task Name",
                "TaskType"
            ]
        },
        {
            "displayname": "",
            "fields": [
                "AssignedTo",
                "TaskProgress"
            ]
        },
        {
            "displayname": "Task Dates",
            "fields": [
                "TaskDueDate",
                "TaskStartDate"
            ]
        }
    ]
}

Within the code, replace each section with your two fields. Add the section until you show all our fields.

Result:

Example 6: Customize SharePoint List Form Footer

I will show you here how to add a custom footer to the modern SharePoint list form.

Check out the steps below:

1. Go to the Format pane, select ‘Footer‘ in the Apply formatting to dropdown.
2. Paste the custom footer formatted in the Formatting code box.
3. To save the changes, click the Save button.

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "center",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "height": "20px",
                "width": "100%",
                "color": "#fff",
                "font-size": "25px",
                "border-top": "5px solid #eee",
                "background-color": "black",
                "padding": "5px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": ""
                }
            ]
        }
    ]
}

Result:

Example 7: Customize Informative Message in SharePoint List Form Footer

As mentioned in the previous example, follow the same steps to apply formatting to the SharePoint Online list form footer.

Into the Formatting code box, copy and paste the JSON code below, which includes custom footer code with a notification banner.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "100%",
        "margin-bottom": "20px",
        "background-color": "black"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "customlist",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-xl ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover",
                        "title": "Project Status"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0.1px",
                        "height": "20px",
                        "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": "12px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Project Status"
                }
            ]
        }
    ]
}

Then, click on the Save button to apply the changes.

Result:

Although we can customize the Modern SharePoint list form using JSON formatting, this customization is limited, and we can only perform specific configurations. For advanced customization options, I recommend using Power Apps, which enables the creation of visually appealing forms.

Hope this tutorial is informative. Feel free to mention your suggestions in the comment section placed below.

Read Other Articles in SharePoint Online:

• SharePoint List View Customization JSON Formatting
• Create a Custom ID Column in SharePoint List using JSON
• Extract Email from SharePoint Person or Group Field JSON
• Gantt Chart View in SharePoint Online Modern List Using JSON

Preeti Sahu

Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.