How to Customize SharePoint List Form Layout using JSON Code?

Recently, while working on a Project Management solution, I received a requirement from one of our clients based in Canada. They wanted to customize the SharePoint list form into a two column layout using JSON code.

I thought I would share my experience on configuring a custom SharePoint list form in this tutorial.

In this tutorial, I will explain how to customize the SharePoint list form layout using JSON code. Additionally, I will share how to configure the custom Header, Footer, and Body of a SharePoint Online list form layout.

Customize SharePoint List Form Layout by using JSON

To show how to do customization for a SharePoint list form, I will use a SharePoint list (Project Schedule List) with a couple of columns, as shown in the table below:

Default SharePoint List Form:

After using the Json code, the SharePoint form will look like in the image below:

Check out Customize SharePoint list forms with Power Apps based on conditions

Customize a SharePoint List Form [Header] Section using JSON Code

To customize the header section of a SharePoint list form by using json code, follow the steps below:

1. Open the Modern SharePoint list where you want to configure the form.
2. After that, click on +Add new item to view the display form of a SharePoint list.
3. At the top right of the form, expand the Edit Form icon and then select Configure layout.

4. Then, the Format pane will display, where we can apply formatting to the Header, Body, and Footer sections.

5. From the drop-down of Apply formatting to, choose Header as an option.

Provide the code placed below:

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "100%",
        "margin-bottom": "20px",
        "background-color": "blue"
    },
    "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": "Details"
                    },
                    "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 Schedule"
                }
            ]
        }
    ]
}

6. Once done, click the Save button to update the formatting to the Header section.

Here is the updated header section of the SharePoint list form using JSON code.

This is how to customize the header section for a SharePoint list form using JSON code.

Check out Customize SharePoint Modern list form using JSON

Configure Modern SharePoint List Form [Body] Section using JSON Code

To customize the body form of a SharePoint list into different sections, follow the instructions.

1. In the Format pane window, choose Body from the Apply formatting dropdown.

Copy and paste the custom body json code in the Formatting code box.

{
    "sections": [
        {
            "displayname": "New Project Status",
            "fields": [
                "Title",
                "Project Start Date",
                "Project End Date",
                "ID#"
            ]
        },
        {
            "displayname": "Project Indicator",
            "fields": [
                "Percent Complete",
                "Priority",
                "Start Date",
                "Due Date"
            ]
        },
        {
            "displayname": "Initiative Status - Executive Summary:",
            "fields": [
                "Predecessors",
                "Task Type",
                "Assigned To",
                "Task Status"
            ]
        },
        {
            "displayname": "Project Issue Summary & Risk:",
            "fields": [
                "Stage",
                "Actions Taken / Next Steps"
            ]
        }
    ]
}

2. After inserting the code, click the Save button. The SharePoint list form will switch to a multi-column layout with different sections. Here, you can replace the list column names with your SharePoint list column display names.

Refer to the image below:

Check out SharePoint List Calendar View Formatting

Configure SharePoint List Form [Footer] Section Using JSON Code

To apply the formatting to the footer in the SharePoint list form, look at the steps below.

1. On the Format window pane, choose the Footer option in the Apply formatting to dropdown. Copy and paste the custom JSON Code below into the Formatting code dialogue box.

{
    "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": "blue",
                "padding": "5px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": ""
                }
            ]
        }
    ]
}

2. To preview the SharePoint list form changes, click the Preview button. Click on the Save button to update the custom footer.

3. Once the json code is saved, you can see the changes applied to a SharePoint list form in the screenshot below.

You can see the exact output in the screenshot below:

Conclusion

I hope this SharePoint tutorial will make you understand how to configure three sections of a modern SharePoint list form [Header, Footer, and Body]using JSON code. This way, you can customize a SharePoint list form using JSON code.

You may also like the following tutorials:

• Format a SharePoint Online List Column using JSON
• Gantt Chart View in SharePoint Online Modern List Using JSON
• Create a Custom ID Column in SharePoint List using JSON
• SharePoint list conditional formatting based on a date
• SharePoint List View Formatting by JSON Using Lookup Value

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.