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.
Customize SharePoint Modern list form
Customize SharePoint Modern list form

3. At the top of the form, Click New and expand the Edit Form icon and then select Configure layout.

Customize SharePoint Modern list form using JSON example
Customize SharePoint Modern list form using JSON

4. In the Format pane, you can choose to apply formatting to the following form section.

  • Header
  • Body
  • Footer
Customize SharePoint Modern list form using JSON
How to Customize SharePoint Modern list form using JSON

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"
                }
            ]
        }
    ]
}
sharepoint modern list form json formatting
sharepoint modern list form json formatting

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."
                }
            ]
        }
    ]
}
sharepoint modern list form json
sharepoint modern list form json formatting

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"
            ]
        }
    ]
}
sharepoint list form json examples
sharepoint list form json examples

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.

sharepoint list form formatting json examples
sharepoint list form formatting json examples

You may like the following SharePoint tutorials:

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
>