SharePoint Form Formatting with JSON.

[ursNani]

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

[Waegemma]

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

[ursNani]

@Waegemma 

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

Thank you 

[ursNani]

@Waegemma 

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

Thank you 

[Waegemma · Accepted solution]

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 😉