How to Use JSON to Customize a SharePoint List Form

Last Updated on March 19, 2024

Microsoft SharePoint Online is a great tool that allows collaboration and content sharing within various departments of an organization.

One of the many capabilities of the cloud-based SharePoint tool is that it allows users to design a list form with JSON.

In the past, SharePoint list forms can only be customized with InfoPath, a tool for designing, filling, submitting, and distributing online forms.

The process is quite tedious and long to perform.

Using JSON (JavaScript Object Notation), a more human-friendly and readable data interchange format, users can now have more fun with shorter and non-boring ways of configuring their lists.

In this article, you will learn how to use JSON to customize a SharePoint list form.

How to configure the SharePoint list form layout?

A user can configure list forms by adding a custom header, footer, and body section.

The body of the form can also be customized by adding sections. These sections contain fields that are a group of forms.

The added configurations do not alter the data of the list being applied upon — it only changes the looks and feels of the form.

JSON is a great way of configuring forms as it allows for building the custom header, body sections, and footer with their attributes and elements.

Below is a step-by-step process of configuring forms in a list:

1. First, open the list or library you want to customize.

When in the list, open an item by clicking on its name or title to view its details in the display form.

Here’s an example of the default look:

2. At the top of the form, click on the dropdown button to expand the edit form settings and select the“Configure layout” option.

This will open a format pane where you can select what part of the form you want to customize.

How to customize the SharePoint list form header with JSON

To configure the Header section of the list form, follow this process:

1. From the format pane, make sure the “Header” option is selected on the first field (as by default).

Below that, you can see a text input area where you can enter a custom header in JSON format.

2. The next step is to enter the JSON code.

Here’s a sample of a JSON code you can use:

{
    "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": "15px",
        "background-color": "blue"
    },
    "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": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "white"
                    }
                }
            ]
        },
        {
            "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",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Employee Details - ' + [$EmployeeName]"
                }
            ]
        }
    ]
}

Simply paste that code into the field.

3. Now, you can always preview the changes made to the list by clicking on the “Preview” button right after pasting the code.

You will immediately see the difference on the list form:

4. If you are pleased with the preview, click on the “Save” button to apply the changes to your form.

When done, close the form. When you open the list form again, you will see the same changes you saw while in preview.

How to customize the SharePoint list form body with JSON

To configure the body section of the list form, follow the steps below:

From the format pane, select “Body” on the “Applying formatting to” field.

Like when customizing the header, you will see a text input area where you can paste your code.

Then, enter your JSON code. You can use the code below for a demonstration:

{
    "sections": [
        {
            "displayname": "Personal Details",
            "fields": [
                "Name",
                "Company"
            ]
        },
        {
            "displayname": "Contact Details",
            "fields": [
                "Email",
                "Phone"
            ]
        }    ]
}

What the code above will do is divide the details into two parts —personal details and contact details. Feel free to customize this according to your list.

Click on the “Preview” button to see how the code will affect the body section.

Don’t forget to click on the “Save” button once you’re done.

Note: The Body configuration is a bit different from that of the header and the footer.

This is because it allows the user to define one or many sections and also allows the user to add one or more columns into those sections.

Below are some key attributes of the body section:

• Users can define one or more sections for the body.
• Each defined section can reference one or more columns in the list.
• One column can only be referenced in one section.
• Before a column is referenced in multiple sections, the first section where it is referenced will take precedence — thus, nullifying the references in other sections.
• If you do not reference a column in any sections, it automatically gets referenced in the last section.
• Unless specified, any added new columns will be referenced in the last section.
• If a user configures the body with one or more sections, the list form automatically switches from a single-column to a multi-column layout.

How to customize the SharePoint list form footer with JSON

To configure the footer section of the list form, follow this process:

From the format pane, make sure the “Footer” is selected on the “Applying formatting to” field.

Like with the sections above, you will see a text input area where you can paste your code.

Then, enter your JSON code. You can try out the code below to demonstrate:

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "height": "15px",
                "width": "100%",
                "color": "#fff",
                "font-size": "13px",
                "border-top": "5px solid #eee",
                "background-color": "orange",
                "padding": "10px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "© MrSharePoint 2021"
                }
            ]
        }
    ]
}

Click on the “Preview” button to see how the code will affect the body section.

Don’t forget to click on the “Save” button once you’re done.

Using JSON to customize a SharePoint list form

Although the JSON format is an efficient method for customizing list forms, it comes with a few drawbacks.

Some of which include:

• Wider look (due to the increase in form width)
• The inability to manipulate fields (e.g., show/hide visibility option)
• Apply styles to the body section.

Apart from these few limitations, JSON is an all-around efficient tool.

If you feel confused, feel free to comment with your questions below. For inquiries, reach out to me directly through my contact page and I’ll get back to you asap.