Forum Discussion

Narender's avatar
Narender
Copper Contributor
May 28, 2022
Solved

SharePoint list Form footer 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

developer
SharePoint Online
  • PamDeGraffenreid's avatar
    PamDeGraffenreid
    May 29, 2022

    Narender   I think this is what you are looking for - let me know if it works for you.

    {
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "flex-start",
        "align-items": "flex-start"
    },
    "children": [
        {
            "elmType": "a",
            "txtContent": "Link A",
            "attributes": {
                "target": "_blank",
                "href": "https://microsoft.com/"
            }
        },
        {
            "elmType": "a",
            "txtContent": "Link B",
            "attributes": {
                "target": "_blank",
                "href": "https://microsoft.com"
            }
        }
    ]
}

     

7 Replies

  • RobElliott's avatar
    RobElliott
    Silver Contributor
    May 29, 2022

    Narender the response from PamDeGraffenreid will add each link onto a new line in your footer. If you want the links to be next to each other then use the following:

    {
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "block"
    },
    "children": [
        {
            "elmType": "a",
            "txtContent": "Google ",
            "attributes": {
                "target": "_blank",
                "href": "https://google.com"
            }
        },
        {
            "elmType": "a",
            "txtContent": "Microsoft ",
            "attributes": {
                "target": "_blank",
                "href": "https://www.microsoft.com/"
            }
        },
        {
            "elmType": "a",
            "txtContent": "Oracle ",
            "attributes": {
                "target": "_blank",
                "href": "https://www.oracle.com/"
            }
        }
    ]
}

     

     

    Rob
    Los Gallardos
    Microsoft Power Automate Community Super User

    • PamDeGraffenreid's avatar
      PamDeGraffenreid
      MVP
      May 30, 2022

      RobElliott Rob, do you know how you would add spaces between those links? I was playing with it earlier and couldn’t get them in there. 

      • RobElliott's avatar
        RobElliott
        Silver Contributor
        May 30, 2022
        You could lay them out across the footer with space between them by using display:flex as you originally had it but then change the justify-content to "justify-content":"space-between"

        "style": {
        "display": "flex",
        "justify-content": "space-between"
        }
  • PamDeGraffenreid's avatar
    PamDeGraffenreid
    MVP
    May 29, 2022

    Narender   I think this is what you are looking for - let me know if it works for you.

    {
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "flex-start",
        "align-items": "flex-start"
    },
    "children": [
        {
            "elmType": "a",
            "txtContent": "Link A",
            "attributes": {
                "target": "_blank",
                "href": "https://microsoft.com/"
            }
        },
        {
            "elmType": "a",
            "txtContent": "Link B",
            "attributes": {
                "target": "_blank",
                "href": "https://microsoft.com"
            }
        }
    ]
}

     

Resources