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 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.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (1,162)