Require updated JSON coding for custom footer on SP list

Harry N Nomikos 1,226 Reputation points
2022-05-19T13:13:39.347+00:00

Hi Team

I require JSON coding for a footer on a SP list to include;

  • A black banner along the bottom of the form
  • Title box with white text
  • 4 section for hyperlinks

Below is how I want it to look.

Star Safety Attestation links below (in white font with a black banner behind it)
Link 1
Link 2
Link 3
Link 4

If we can replicate the header with the black banner and white font, that'll work perfectly. I've provided the JSON coding below for the header and also how the form current looks;

Header JSON coding
{
"debugmode": "true",
"elmType": "div",
"attributes": {
"class": "ms-bgColor-black"
},
"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": "https://www.withcashback.com.au/wp-content/uploads/2020/01/_701x287.jpg"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white 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] == '', 'Health & Safety Attestation Survey', 'Item: ' + [$Title])"
}
]
}
]
}

SP List Form
203771-image.png

Any help here would be greatly appreciated
Cheers
Harry

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,412 questions
{count} votes

Accepted answer
  1. Emily Du-MSFT 40,566 Reputation points Microsoft Vendor
    2022-05-24T09:40:13.497+00:00

    @Harry N Nomikos

    Please try below codes. To open link in a new tab, please press Ctrl in the keyboard then click link.

    {  
        "debugmode": "true",  
        "elmType": "div",  
        "attributes": {  
            "class": "ms-bgColor-black"  
        },  
        "style": {  
            "width": "100%",  
            "border-top-width": "0px",  
            "border-bottom-width": "0px",  
            "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": "https://tenant.sharepoint.com/sites/emilytest2/testdoc/White_Persian_Cat.jpg"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "div",  
                        "txtContent": "=if ([$Title] == '', 'Health & Safety Attestation Survey', 'Item: ' + [$Title])",  
                        "attributes": {  
                            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "div",  
                        "style": {  
                            "box-sizing": "border-box",  
                            "width": "100%",  
                            "text-align": "left",  
                            "padding": "6px 12px",  
                            "overflow": "hidden"  
                        },  
                        "children": [  
                            {  
                                "elmType": "a",  
                                "txtContent": "link1",  
                                "attributes": {  
                                    "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                                    "class": "ms-fontColor-white ms-fontSize-20"  
                                }  
                            }  
                        ]  
                    },  
                    {  
                        "elmType": "div",  
                        "style": {  
                            "box-sizing": "border-box",  
                            "width": "100%",  
                            "text-align": "left",  
                            "padding": "6px 12px",  
                            "overflow": "hidden"  
                        },  
                        "children": [  
                            {  
                                "elmType": "a",  
                                "txtContent": "link2",  
                                "attributes": {  
                                    "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                                    "class": "ms-fontColor-white ms-fontSize-20"  
                                }  
                            }  
                        ]  
                    },  
                    {  
                        "elmType": "div",  
                        "style": {  
                            "box-sizing": "border-box",  
                            "width": "100%",  
                            "text-align": "left",  
                            "padding": "6px 12px",  
                            "overflow": "hidden"  
                        },  
                        "children": [  
                            {  
                                "elmType": "a",  
                                "txtContent": "link3",  
                                "attributes": {  
                                    "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                                    "class": "ms-fontColor-white ms-fontSize-20"  
                                }  
                            }  
                        ]  
                    },  
                    {  
                        "elmType": "div",  
                        "style": {  
                            "box-sizing": "border-box",  
                            "width": "100%",  
                            "text-align": "left",  
                            "padding": "6px 12px",  
                            "overflow": "hidden"  
                        },  
                        "children": [  
                            {  
                                "elmType": "a",  
                                "txtContent": "link4",  
                                "attributes": {  
                                    "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                                    "class": "ms-fontColor-white ms-fontSize-20"  
                                }  
                            }  
                        ]  
                    }  
                ]  
            }  
        ]  
    }  
    

    205037-image.png


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


1 additional answer

Sort by: Most helpful
  1. Emily Du-MSFT 40,566 Reputation points Microsoft Vendor
    2022-05-20T09:21:53.4+00:00

    @Harry N Nomikos

    Here's an example for you.

    {  
        "debugmode": "true",  
        "elmType": "div",  
        "attributes": {  
            "class": "ms-bgColor-black"  
        },  
        "style": {  
            "width": "99%",  
            "border-top-width": "0px",  
            "border-bottom-width": "0px",  
            "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": "70px"  
                        },  
                        "attributes": {  
                            "src": "https://tenant.sharepoint.com/sites/emilytest2/testdoc/White_Persian_Cat.jpg"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "div",  
                        "txtContent": "=if ([$Title] == '', 'Health & Safety Attestation Survey', 'Item: ' + [$Title])",  
                        "attributes": {  
                            "class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "a",  
                        "txtContent": "link1",  
                        "attributes": {  
                            "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                            "class": "ms-fontColor-white ms-fontSize-20"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "a",  
                        "txtContent": "link2",  
                        "attributes": {  
                            "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                            "class": "ms-fontColor-white ms-fontSize-20"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "a",  
                        "txtContent": "link3",  
                        "attributes": {  
                            "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                            "class": "ms-fontColor-white ms-fontSize-20"  
                        }  
                    }  
                ]  
            },  
            {  
                "elmType": "div",  
                "style": {  
                    "box-sizing": "border-box",  
                    "width": "100%",  
                    "text-align": "left",  
                    "padding": "6px 12px",  
                    "overflow": "hidden"  
                },  
                "children": [  
                    {  
                        "elmType": "a",  
                        "txtContent": "link4",  
                        "attributes": {  
                            "href": "='https://aka.ms/contacts?email=' + [$Email]",  
                            "class": "ms-fontColor-white ms-fontSize-20"  
                        }  
                    }  
                ]  
            }          
        ]  
    }  
    

    Result:

    203978-image.png


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.