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.

Adnan, a distinguished professional, boasts an impressive track record as a Microsoft MVP, having achieved this prestigious recognition for the eighth consecutive year since 2015. With an extensive career spanning over 18 years, Adnan has honed his expertise in various domains, notably excelling in SharePoint, Microsoft 365, Microsoft Teams, the .Net Platform, and Microsoft BI. Presently, he holds the esteemed position of Senior Microsoft Consultant at Olive + Goose. Notably, Adnan served as the MCT Regional Lead for the Pakistan Chapter from 2012 to 2017, showcasing his leadership and commitment to fostering growth within the tech community. His journey in the realm of SharePoint spans 14 years, during which he has undertaken diverse projects involving both intranet and internet solutions for both private and government sectors. His impact has transcended geographical boundaries, leaving a mark on projects in the United States and the Gulf region, often collaborating with Fortune 500 companies. Beyond his roles, Adnan is a dedicated educator, sharing his insights and knowledge as a trainer. He also passionately advocates for technology, frequently engaging with the community through speaking engagements in various forums. His multifaceted contributions exemplify his dedication to the tech field and his role in driving its evolution.

Leave a Reply