Answered

SharePoint Form Formatting with JSON.

(0) Share

Report

Posted on by ursNani

215

Hi

I am formatting sharePoint List with JSON . I want Add to links to the footer . I am new to JSON. so i am able to add One link with JSON like below code. How can i add another link to the form footer
Below is the code :
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "a",
"txtContent": "Google",
"attributes": {
"target": "_blank",
"href": "https://www.google.com/"
}
}

I want to show two links in footer .

Thank you
Narender G

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (1)

Waegemma 583 Super User 2024 Season 1 on at

Like (1)

Report
Copy link

Link copied!

Hi @ursNani ,

I'm not really familiar with JSON formatting but using
How to Use JSON to Customize a SharePoint List Form (mrsharepoint.guru)
I came up with:

{
"elmType": "div",
"style": {
"width": "100%",
"text-align": "left",
"overflow": "hidden",
"border-top-width": "1px"
},
"children": [
{
"elmType": "div",
"style": {
"height": "15px",
"width": "100%",
"color": "#fff",
"font-size": "13px",
"border-top": "5px solid #eee",
"background-color": "orange",
"padding": "10px"
},
"children": [
{
"elmType": "a",
"txtContent": "Google",
"attributes": {
"target": "_blank",
"href": "https://www.google.com/"
}
},
{
"elmType": "a",
"txtContent": "DuckDuckGo",
"attributes": {
"target": "_blank",
"href": "https://www.duckduckgo.com/"
}
}
]
}
]
}

As I say: no expert here. Formatting the links so they don't stick together is something I haven't mastered yet 🙂

Marc

Was this reply helpful? Yes No
ursNani 215 on at

Like (0)

Report
Copy link

Link copied!

@Waegemma

Thanks for the help . Its work perfectly . but i want to space them between. Can we do that

Thank you

Was this reply helpful? Yes No
ursNani 215 on at

Like (0)

Report
Copy link

Link copied!

@Waegemma

Thanks for the help . Its work perfectly . but i want to space them between. Can we do that

Thank you

Was this reply helpful? Yes No
Verified answer

Waegemma 583 Super User 2024 Season 1 on at

Like (2)

Report
Copy link

Link copied!
Hi @ursNani ,

I looked at https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json
and the HTML-tags you can use are:

"enum": [ "div", "button", "span", "a", "img", "svg", "path"
so something like <nav>, which would be perfect, cannot be used...

However, I came up with this:

{ "elmType": "div", "style": { "width": "100%", "text-align": "left", "overflow": "hidden", "border-top-width": "1px" }, "children": [ { "elmType": "div", "style": { "height": "15px", "width": "15%", "color": "#fff", "font-size": "13px", "border-top": "5px solid #eee", "background-color": "orange", "padding": "10px" }, "children": [ { "elmType": "a", "txtContent": "Google", "attributes": { "target": "_blank", "href": "https://www.google.com/" } } ] }, { "elmType": "div", "style": { "height": "15px", "width": "15%", "color": "#fff", "font-size": "13px", "border-top": "5px solid #eee", "background-color": "orange", "padding": "10px" }, "children": [ { "elmType": "a", "txtContent": "Google", "attributes": { "target": "_blank", "href": "https://www.google.com/" } } ] } ] }

You can change the two div's that have a width of 15% to the percentage that fits you.

This is the best I can do 🙂

If it's what you looked for: accept as solution to close this topic 😉

Was this reply helpful? Yes No