1. Home
  2. Knowledge Base
  3. Microsoft
  4. SharePoint
  5. Adding a header to the SharePoint list form

Adding a header to the SharePoint list form

In this article we will look at how to add a header element to the form. For convenience, we’ll add a logo to the header. You can use visual indicators, color bands, and more. Use the SharePoint formatting syntax references, it will be easier 🙂

Add header

Step 1

Click on “New” and select “Configure layout”.

Step 2

In the Format section, make sure that Apply formatting to as ‘Header’ is selected.

Step 3

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

Notice

Be sure to change the “src” to a 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 need to update your browser

Step 5

Troubleshoot if the logo does not appear. if the logo does not appear. If it still doesn’t work, observe the JSON formatting being saved and investigate any formatting issues using the developer tools. You can copy the code from the Git Hub reference in the reference section and modify the code to suit your needs.

Dieser Beitrag ist auch verfügbar auf: Deutsch (German)

Was this article helpful?

Related Articles

Submit a Comment

Your email address will not be published. Required fields are marked *

Published on - 20. May 2023
Modified on - 27. Mar 2024
Views - 301
Likes - 0

Contents

Do you need help?

Kontaktiere uns gerne :-)
Contact Support
Skip to content