How to Customize SharePoint Modern list form using JSON

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:

1. Go to the SharePoint list or library for which you want to configure the form.
2. 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