SPO – JSON form custom formatting

Hello, Today we spoke (write 🙂 )about SharePoint list form customization. Basically, we have two way to customize existing form:

• JSON Formatting
• Edit form with Power Apps

We try to Explain how to customize form formatting with Json.

Format Form

Go to your list, and click on New, click on the top right Edit form icon, e click on “Configure layout”.

Basically We can write some JSON to format these sections:

• Header
• Body
• Footer

Header customization

Choose “Header”. How can we customize it?

We can start from official MS Docs , copy header JSON code and try it:

{
    "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": "Group",
                        "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": "='Contact details for ' + [$Title]"
                }
            ]
        }
    ]
}

So , now we can see result.

Before:

After:

How to edit?

Basically, our JSON going to apply style to these section:

{
    "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"
    },

Element:

 "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },

Style

  },
    "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"
    },

Some people asking me, “How can I find witch section I’m modifing? I’m not expert” , an Idea is : Add background color red to style to indentify section:

Not beautiful to see, but simple to identify 🙂

Body customization

To customize Body, you should simply define Sections and fields, in my case:

{
    "sections": [
        {
            "displayname": "Basic information",
            "fields": [
                "Title",
                "Description"
            ]
        },
        {
            "displayname": "Worfkflow status",
            "fields": [
                "Step"
            ]
        },
        {
            "displayname": "Other",
            "fields": [
                "Attachments"
            ]
        }
    ]
}

Footer Customization

Now the last part, footer. Similar to header, we can write JSON for a part to customize

{
    "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": "='This is footer section! ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://aka.ms/contacts?email=' + [$Title]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}

As you can see , you can also use field of the record , in our example title: [$Title].

References & info

Syntax

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference

Advanced formatting concepts

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-advanced

Where you can find icons name

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

Column formatting

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#creating-custom-json

Considerations

This is one way. Another option is modify form with Power Apps, let me know if you want an article to understand how.

Contact me for questions! Have a nice day!