Forum Discussion

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

developer

SharePoint Online

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"
            }
        }
    ]
}

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

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
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"
}
- Narender
  Copper Contributor
  May 31, 2022
  RobElliott
  
  Can we inset link in SharePoint List form body like below with JSON. I need three section in form
  first will be "Please tag event name and Year" (Link should beside).
  second section : details and third will be Others
  
  Please need help in this please give me codes if possible . i am new to JSON formatting
  
  Thanks for the help
- PamDeGraffenreid
  MVP
  May 30, 2022
  Thank you!!