Require updated JSON coding for custom footer on SP list

Question

Require updated JSON coding for custom footer on SP list

Harry N Nomikos 1,336

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

Any help here would be greatly appreciated
Cheers
Harry

Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2022-05-20T01:26:21.493+00:00

@Harry N Nomikos

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.

Accepted answer

1 additional answer

Your answer

Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2022-05-20T01:26:21.493+00:00

@Harry N Nomikos

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.

Answer 1

@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"  
                            }  
                        }  
                    ]  
                }  
            ]  
        }  
    ]  
}

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.

Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2022-05-27T01:33:53.95+00:00

@Harry N Nomikos

I’m checking how the things are going on about this issue. Whether the answer helps you?

If there is any problem with this issue, feel free to let me know.

Answer 2

@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:

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.

Harry N Nomikos 1,336 Reputation points

2022-05-20T09:54:39.877+00:00

Hi @Emily Du-MSFT

Thank you for the above.

Would it be possible to have the links show directly underneath each other as opposed to across the page?

Also, when clicking on the hyperlink, can we ensure it's opens a new web-browser and not take us off the form?

Kind Regards,
Harry

Share via

Require updated JSON coding for custom footer on SP list

1 additional answer

Your answer