Customize List Forms Using JSON In SharePoint Online

Introduction

If you have a list with more than 10 columns, end users want to see the forms in an arranged manner. The fields should be arranged in group-wise, section-wise manner, should be easy to understand and find. This will make the forms UI user friendly, and users will feel engaged while feeling the forms.

How do you that? What options we must customize SharePoint online list forms?

Details

We can customize the list forms using PowerApps or using JSON formatting. Now how to decide which one to use?

If your requirement matches one of the below then go with PowerApps

• Very complex formatting
• Separate tabs with split forms
• Complex business logic
• Accordions or galleries
• External forms or data sources etc.

If your requirement matches one of the below then go with JSON formatting

• Simple formatting of header, body, rearrange fields in horizontal manner
• Show or hide fields, conditional visibility of fields, etc
• This is very lightweight option if you consider loading time and performance. If you use PowerApps customization it adds extra layer of authentication.

In this article we will look at how to format forms using JSON formatting.

Steps to format header

Navigate to your list -> Click on Edit form Icon -> Select Configure Layout option as shown below

Now select Header in “Apply formatting to” dropdown list -> Copy below sample JSON code in the box and click on Preview to see the changes

You can modify this JSON as per your need, can add more controls to it, change the text and icon easily. Refer this URL to find icons which you might want to use in your forms. Change the name of the icon in above JSON and it will reflect automatically.

Once the changes are done -> Click on Save. Close the windows, refresh list view -> click on new and check if your changes are reflected or not.

JSON Code for header formatting

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "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": "HomeVerify",
                        "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"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Details for ' + [$Title]"
                }
            ]
        }
    ]
}

Format body, rearrange the fields and change the layouts

Navigate to your list -> Click on Edit form Icon -> Select Configure Layout option as shown below à Now select Body in “Apply formatting to” dropdown list -> Copy below sample JSON code in the box and click on Save to see the changes. Close the window and refresh the view and click on new again to see if the changes get reflected.

{
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title"
            ]
        },
        {
            "displayname": "Apartment and Rent",
            "fields": [
                "Project",
                "Apartment",
                "Rent"
            ]
        },
        {
            "displayname": "Contract Details",
            "fields": [
                "Contract",
                "ContractDate",
                "Justification"
            ]
        },
        {
            "displayname": "Other details",
            "fields": [
                "Agent",
                "FurnitureNeeded",
                "FurnitureBudget"
            ]
        },
        {
            "displayname": "Approval",
            "fields": [
                "ApprovalStatus",
                "Approver1",
                "Approver2"
            ]
        }
    ]
}

Now above JSON is very easy to understand. It’s all about sections nodes, give section heading in display name field. Add internal names of the columns inside fields node, the columns you want to show in that section. It must be internal name of the column.

This JSON formatting will show the columns which are mentioned in it, other columns won’t be shown on the forms; those will be skipped automatically.

This is how it looks after applying the formatting, isn’t it nice to see all your fields arranged in group wise manner. If you have more than 20-30 fields this will be life savior for end users. They don’t need to scroll a lot; fields will be arranged as per their grouping/matching and it will be readable.

You can make use of modern style classes, which are used in modern SharePoint branding. Refer this blog where you will get all list of modern classes with their effect.

Check out this YouTube video to see this live-in action.

Summary

As you can see it is very simple and easy to format header, footer, body of your list forms. It's very simple JSON, you will be able to get the JSON from this Microsoft documentation.

Hope this will help you guys. Thanks for reading.