question

HarryNNomikos-2846 avatar image
0 Votes"
HarryNNomikos-2846 asked EmilyDu-MSFT commented

Require updated JSON coding for custom footer on SP list

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

office-sharepoint-online
image.png (72.5 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@HarryNNomikos-2846

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.

1 Vote 1 ·
EmilyDu-MSFT avatar image
0 Votes"
EmilyDu-MSFT answered EmilyDu-MSFT commented

@HarryNNomikos-2846

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.



image.png (112.2 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@HarryNNomikos-2846

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.

0 Votes 0 ·
EmilyDu-MSFT avatar image
0 Votes"
EmilyDu-MSFT answered HarryNNomikos-2846 commented

@HarryNNomikos-2846

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.




image.png (76.3 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @EmilyDu-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

0 Votes 0 ·