Customizing SharePoint List Add/Edit form layout using JSON

In Modern SharePoint Lists and Libraries, we can change the layout of the default list form using JSON or by modifying the list forms in Power Apps. JSON formatting is still new and you can do a user friendly interface with a little code under standing. Even if you donot have any expertise on coding side you can still use the available json formats. In Past, we can do the form customizations using Infopath or by modifying the list Form using SharePoint designer.

In this blog post, I am going to share any easy way to format list form using a simple JSON format. In a SharePoint List / library form, there are three areas in the form where you can customize the formatting.

• Header
• Footer
• Body

To customize , just select any of the list item or file to view the details, it will show the display form on right side, expand the Edit Form icon and select Configure Layout.

In above picture, you can see that when I have selected the Configure layout button, it opened the format pane, and showing a dropdown to select Header, Body and Footer sections.

Header Format

I am sharing a sample format which you can use format the header section. I have copied the JSON format from Configure the list form and did some customization to change the icon and background of the header section.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary ms-bgColor-communicationTint20"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px",
        "padding-left": "10px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "contactlist",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24 ms-bgColor-communicationTint20"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Contact details for ' + [$Title]"
                }
            ]
        }
    ]
}

Footer Format

I have copied the JSON format from Configure the list form and haven’t done any customization but you can add your customization as per requirements.

Body Format

Select the Body from Apply Formatting to dropdown and copy below JSON for changing the layout of your list form body. I have created sections (groups)  in the body layout and you can also divide columns in different groups and can name accordingly.

{
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title",
                "LastName"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "DateofBirth",

                "Email",

                "Gender",

                "PhoneNumber"
            ]
        },
        {
            "displayname": "Properties",
            "fields": [
                "MedicalHistory"
            ]
        }
    ]
}

You can also preview the changes by hitting the preview button. Save the changes and now you have a customize layout for your list forms. This layout would be available for your Add / Edit and view forms. In Below screenshot you can see the Add new item form showing the First Name value in Form header and footer.