How to configure layout and add custom sections to SharePoint list form

Hello everyone and welcome to my blog. In today’s blog I am going to show how you can edit the layout of a SharePoint list item form.

In this blog, we will cover the following requirements.

1. How to edit a SharePoint list item form
2. How to add custom sections, arrange fields and configure the layout of controls in SharePoint list item form.

Through my blog I share interesting tips and discuss on latest releases of Microsoft.NET technologies, Dynamics 365 and Power Platform, SharePoint and Client scripting libraries. Please subscribe to my blog to stay updated.

So let’s get started. I have a list item with few fields. Below is the illustration for the form

I want to group the fields in multiple sections and configure the form. Let’s see how we can accomplish this.

If you click on the List item record, you will get the option to Edit the layout of the screen. Illustration below for reference.

Click on ‘Configure layout‘. You will have the option to configure the layout of header, body and footer.

In today’s blog I will focus only on formatting the body. Choose Body. Now we will need to prepare the formatting code.

Below is a sample of the formatting supported by Body of the form.

{
    "sections": [
        {
            "displayname": "<display name of the section>",
            "fields": [
                // The fields you want to display in this section
                "<field1 schema name>",
                "<field2 schema name>",
            ]
        },
        {
             "displayname": "<display name of the section>",
            "fields": [
                // The fields you want to display in this section
                "<field3 schema name>",
                "<field4 schema name>",
            ]
        }
    ]
}

Following the same convention, below is the JSON I am using for body in my example.

{
    "sections": [
        {
            "displayname": "Details",
            "fields": [
                "Title",
                "Category",
                "Sign_x002d_off_x0020_status"
            ]
        },
        {
            "displayname": "Documents",
            "fields": [
                "Image",
                "Attachments"
            ]
        }
    ]
}

After I save, below is the final look and feel of my edit form.

Wonderful isn’t it? I have the columns laid out exactly the way I wanted. Using similar technique you can arrange fields in multiple sections and configure the layout.

I hope this helped. If you have liked the post and if this post has helped you, please subscribe to my blog.

Debajit Dutta