Configure SharePoint List Form Layout

Hi Everyone,

In one of my blog, we saw how to apply column formatting. You can check it here – Customize SharePoint columns using column formatting. Similarly like this, we can configure the layout of SharePoint list form. Let’s see how to do it!!

Before configuring layout form looks like below:

1. Go to your list.
2. Click New.
3. Click the Edit form icon and then click Configure Layout.

4. Following panel opens.

5. Type the below JSON in the editing space given. After JSON is added, click preview. You will see header is changed.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary ms-bgColor-themePrimary"
    },
    "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"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "PeopleAdd",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-white",
                        "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"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "Create Contact"
                }
            ]
        }
    ]
}

6. Now change Apply formatting to drop down to Body.

7. Add the following JSON and click preview.

{
	"sections": [
		{
			"displayname": "Personal Details",
			"fields": [
				"First Name",
				"Last Name",
				"Full Name",
				"Email Address",
				"Home Phone",
				"Mobile Number"
			]
		},
		{
			"displayname": "Address Details",
			"fields": [
				"Address",
				"City",
				"State/Province",
				"ZIP/Postal Code",
				"Country/Region"
			]
		},
		{
			"displayname": "Company Details",
			"fields": [
				"Company",
				"Job Title",
				"Business Phone"
			]
		}
	]
}

8. Click Save. You won’t see changes when you Save. Close the form and open it again to see all changes.

References:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration

Thanks for reading

Please like, share, comment