cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ursNani
Advocate II
Advocate II

SharePoint Form Formatting with JSON.

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

1 ACCEPTED SOLUTION

Accepted Solutions
Waegemma
Helper V
Helper V

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 😉

View solution in original post

4 REPLIES 4
Waegemma
Helper V
Helper V

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

@Waegemma 

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

Thank you 

@Waegemma 

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

Thank you 

Waegemma
Helper V
Helper V

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 😉

Helpful resources

Announcements
Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on August 17, 2022 at 8am PDT.

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Users online (1,728)