Adding Header To SharePoint List Form

Introduction

 

This is continuation of the article series, customizing SharePoint list forms using JSON which contains following

• Creating list from existing list template
• Adding Logo to your list form (This article)
• Modifying the body of the form
• Adding the footer note.

In this article, we will look into how to add header element to the form. This is continuation from article series Customizing List Forms Using JSON. For the simplicity we are adding a logo to header. You can do Visual Indicators, Color Ribbon and much more. Please refer to PnP samples in the references section.

 

Adding Header

 

Step 1

 

Click on new and select ‘Configure layout’

 

 

Step 2

 

Make sure in the Format section. Apply formatting to is selected as ‘Header’.

 

 

Step 3

 

In the JSON formatting box, apply the below JSON code to add information to header section. In here we are trying to add a logo in header.

 

Note

Make sure to chage the “src” to relative url to your company logo

{
    "debugmode": "true",
    "elmType": "div",
    "attributes": {
        "class": "ms-bgColor-white"
    },
    "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": "img",
                    "style": {
                        "width": "150px"
                    },
                    "attributes": {
                        "src": "RELATIVE URL TO LOGO"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-blueMid 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": "=if ([$Title] == '', 'New Item', 'Item: ' + [$Title])"
                }
            ]
        }
    ]
}

 

Step 4

 

Observe the logo after the formatting is saved successfully. You may want to refresh the browser

 

 

Step 5

 

Troubleshoot if the logo is not appearing. if the logo did not appear. If it still fails, observe the JSON formatting is saved and you may want to investigate via developer tools for any formatting issues. You can copy paste the code from the git hub reference in reference section and modify the code according to your needs.

 

Conclusion

 

Thus in this article we have seen how to add header to your form. You can also add text or ribbon. please refer to microsoft docs on reference section. You can also watch the video series in reference section. 

 

References

• https://pnp.github.io/sp-dev-list-formatting 
• https://github.com/vayin/ListFormatting/blob/267daccd50986e2701241046aca59fc1d4cafe4f/Header_StaticBackGround_YourCompanyLogo.txt
• https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration
• https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/modern-sharepoint-list-formatting/ba-p/2128544
• https://www.youtube.com/playlist?list=PLTyFh-qDKAiE7C_2lVNAPzgHXsBykG0Tf