How to customize SharePoint Modern list form using JSON formatting


Creating custom beautiful forms is something SharePoint developers and designers work day in and day out.

Until now, if you had to design a simple SharePoint Add/Edit/View form, the choices were only through customization - PowerApps, Spfx, InfoPath, SharePoint Designer, JQuery with Content Editor.
But now, you can quickly convert the plain SharePoint Online List form to a more appealing one using JSON formatting, with your organization branding. Using JSON formatting, you can add header, footer and sections to group columns together.

This only customizes the look and feel of the list form and does not change the data in list item or file.
Anyone with create and manage view permission on a list can use form configuration to configure the form with header, footer and body with sections.

SharePoint allows Column Formatting and View Formatting using JSON. Now you can extend the same logic to even customize and format list forms - Newform.aspx, Editform.aspx, Dispform.aspx


Example to customize SharePoint Online List form using JSON

Consider we have a custom SharePoint List "Employee" with these columns -
  • Employee Name (Single line of text)
  • Employee ID (Number)
  • Designation (Single line of text)
  • Department (Choice)
  • Email (Single line of text)
  • Mobile (Single line of text)
  • Address (Multiple lines of text)
  • Blood Group (Choice)
  • Emergency Contact (Single line of text)
This is how the dull OOTB (out of the box) SharePoint form looks, not so great.
SharePoint OOTB List form
SharePoint OOTB List form


Navigate to your list "Employee" and click on Edit Form --> Configure Layout.
We will apply JSON formatting in the sections shown here (Header, Body, Footer).

Customize SharePoint List form JSON - 1
Customize SharePoint List form JSON - 1
Customize SharePoint List form JSON - 2
Customize SharePoint List form JSON - 2

✔️ Header formatting

Select "Header" form the dropdown and paste below JSON code. This will add an icon and heading to the top header section of the form. We will also append the Employee Name column value to the form Title, yes that's exactly how you would do for List View 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": "15px",
        "background-color": "orange"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "white"
                    }
                }
            ]
        },
        {
            "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": "='Employee Details - ' + [$EmployeeName]"
                }
            ]
        }
    ]
}
Customize SharePoint List form JSON - Header
Customize SharePoint List form JSON - Header

✔️ Footer formatting

Select "Footer" form the dropdown and paste below JSON code. This will add a copyright text in the bottom footer section of the form. You can add other tags like links in the footer, say to navigate to a user manual.
{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "height": "15px",
                "width": "100%",
                "color": "#fff",
                "font-size": "13px",
                "border-top": "5px solid #eee",
                "background-color": "orange",
                "padding": "10px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "© copyrights 2021"
                }
            ]
        }
    ]
}
Customize SharePoint List form JSON - Footer
Customize SharePoint List form JSON - Footer

✔️ Body formatting

Select "Body" form the dropdown and paste below JSON code. This will divide the form into 3 sections and add respective columns in those sections. That's it, you cannot apply any further formatting to the section yet.
{
    "sections": [
        {
            "displayname": "Primary details",
            "fields": [
                "Employee Name",
                "Employee ID",
                "Department",
                "Designation"
            ]
        },
        {
            "displayname": "Contact",
            "fields": [
                "Email",
                "Mobile"
            ]
        },
        {
            "displayname": "More Details",
            "fields": [
                "Address",
                "Blood Group",
                "Emergency Contact"
            ]
        }
    ]
}
Customize SharePoint List form JSON - Body
Customize SharePoint List form JSON - Body


The changes will apply to all 3 forms - New, Edit, Display. You can try various other styles, formatting to make the form more beautiful. Always "Preview" to make adjustments before you save, saved changes are visible to all users.

A few limitations with list form customization using JSON are - the form width increases and it looks wider, styles cannot be applied to the Body section yet, you cannot manipulate fields (like visibility - show/hide). That may or may not be part of Microsoft's roadmap.

This is how the final form looks with values.

Customize SharePoint List form JSON - display
Customize SharePoint List form JSON - display


Have Questions? Post them here!





Hello there!,

You are using AdBlocker!

I am an independent developer trying to help fellow developers and students to resolve issues faced on a day-to-day basis, we 'Code to Care' . There is a lot of expenses involved in hosting and managing a website that's the reason we have ads.

A humble request to you to disable adBlocker on Code2care.org and support us pay our bills.

Thanks,
Cod2care - Line's of code for change.

To see contents reload page after unblocking
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities. Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Video Tutorials, Code Snippets, Tips-n-tricks, How Tos, Blogs, Articles, etc. on various platforms like Windows, Mac, Linux, Mobile platforms, etc. Technologies/Languages like Java, Objective-C, PHP, .Net, Android, SharePoint, jQuery, HTML, CSS, etc.