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
Super User
Super User

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
Super User
Super User

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
Super User
Super User

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
October Events

Mark Your Calendars

So many events that are happening this month - don't miss out!

Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Top Solution Authors
Top Kudoed Authors
Users online (757)