Customizing SharePoint Online List Forms

Within SharePoint Online the basic editing of how a list form is shown to users is now possible with custom header, footer and body sections. This functionality not only appears in the SharePoint Online user interface but also in Microsoft Teams. So how to get get started, firstly you need to be familiar with JSON format/notation as it is used within the form configuration interface. This allows for predefined elements and attributes to be used to build up the sections. And, secondly, the user must have the ability to create and manage views in the list.

Accessing the new Configure Layout option

  • Navigate to any list in your SharePoint site
  • Open an item to view its details in the display form
  • At the top of the display form expand the Edit Form options and select the Configure layout option

Within the Format pane , there are options to apply formatting to the Header, Body and Footer.

Customizing the Header

  • Select Header in the Applying formatting to drop-down
  • Paste a custom header in JSON format in the text area
  • Below is a sample header which produces the following header
{
    "debugMode": true,
    "elmType": "div",
    "attributes": {
        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary "
    },
    "style": {
        "width": "99%",
        "box-sizing": "border-box",
        "border-style": "solid",
        "margin-bottom": "10px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "border-width": "10px",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "SunQuestionMark",
                        "class": "ms-fontSize-32  ms-fontColor-themePrimary ",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "32px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-primaryTheme ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Trip Details for  ' + [$Title]"
                }
            ]
        }
    ]
}
  • To preview the new header format click the Preview button
  • To save the change, click the Save button

Customizing the Footer

  • Select Footer in the Applying formatting to drop-down
  • Paste a custom footer in JSON format in the text area
  • Below is a sample footer which produces the following footer (assuming that the list has an Email column and the link will take you to the Delve profile)
{
    "debugMode": true,
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "width": "100%",
                "padding-top": "10px",
                "height": "24px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "='Contact Details for ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://<tenant-my.sharepoint.com/PersonImmersive.aspx?accountname=i%3A0%23%2Ef%7Cmembership%7C' + [$Email]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}
  • Again to preview the customization, click the Preview button
  • To save the change, click the Save button

Customize the Body

  • Select Body in the Applying formatting to drop-down
  • The body JSON allows the definition of multiple sections with heading for each section unlike the header and footer sections
  • The structure of the body JSON is defined as below (Note: the field names are the display names of the columns)
{
    "sections": [
        {
            "displayName": "First section display dame",
            "fields": [
                //reference your fields here using their display name
                "fieldname1"
,
                "fieldname2"
            ]
        },
        {
            "displayName": "Second section display name",
            "fields": [
                "fieldname3",
                "fieldname4"
            ]
        }
,
        {
            "displayName": "Third section display name",
            "fields": [
                "fieldname5"
            ]
        }
    ]
}
  • Once the body has been customized the form will be displayed in a multi-column format (A single column layout is not available yet but will available in a future update)
  • Any field or new field not in the JSON will appear in the last section defined
  • So to display the body as below use the JSON defined below
{
    "debugMode": true,
    "elmType": "div",
    "attributes": {
        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary "
    },
    "style": {
        "width": "99%",
        "box-sizing": "border-box",
        "border-style": "solid",
        "margin-bottom": "10px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "border-width": "10px",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "SunQuestionMark",
                        "class": "ms-fontSize-32  ms-fontColor-themePrimary ",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "32px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-primaryTheme ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Trip Details for  ' + [$Title]"
                }
            ]
        }
    ]
}
  • Again to preview the customization, click the Preview button
  • To save the change, click the Save button

So there you have it, formatting those list forms is relatively easy as long as you abide to the JSON format and structure and that’s another tick in the usability section for users when interacting with lists items.

About the author