1

I have the following JSON on my SharePoint (added via Format View for Tiles): {

"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideListHeader": true,
"tileProps": {
  "height": "240",
  "width": "300",
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "align-items": "stretch",
      "margin-bottom": "16px",
      "min-width": "150px",
      "flex-grow": "1",
      "justify-content": "space-around",
      "padding": "8px",
      "color": "#333333"
    },
    "children": [
      {
        "elmType": "a",
        "style": {
          "cursor": "pointer"
        },
        "attributes": {
          "href": "$Link",
          "target": "_blank"
        },
        "children": [
            ***details of tiles goes here***
        ]
      }
    ]
  }
}

}

When I hover over the tile I see the address at the bottom of the browser screen (image showing link as https://OBSCURED_TEXT/Lists/Tech Top Tips/$Link): image showing link as https://OBSCURED_TEXT/Lists/Tech Top Tips/$Link

But the link doesn't work, instead if I click the tile it just opens a dialogue which enables me to edit the various fields for that item. The Link field is included and contains the URL to the video I want to show when the tile is clicked. Other fields such at Title are working fine with $Title to display them.

I have tried putting in a direct URL, using "href": "='https://path_goes_here' + [@Link]" and various other tips I've come across on my travels on the internet but to no avail.

Please can someone explain what I need to do to enable my links to work? If I have missed a detail in settings to help you answer my question then I'm sorry, please let me know and I will add it!

  • What is stored in $link column? – Ganesh Sanap May 19 at 13:32
  • The URL to the video I want the user to see when they click the tile – Bytsy May 19 at 15:03
0

In JSON formatting, while referencing the list column you need to use it in format of [$FieldName]. Where [$FieldName] is the internal name of the column.

So in your code you need to use it like, [$Link] (Provided it contains valid web address).

Update from comments:

Try using your JSON code like below:

{
    "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideListHeader": true,
    "tileProps": {
        "hideSelection": true,
        "height": "240",
        "width": "300",
        "formatter": {
            "elmType": "div",
            "style": {
                "display": "flex",
                "align-items": "stretch",
                "margin-bottom": "16px",
                "min-width": "150px",
                "flex-grow": "1",
                "justify-content": "space-around",
                "padding": "8px",
                "color": "#333333"
            },
            "children": [{
                "elmType": "a",
                "style": {
                    "cursor": "pointer"
                },
                "attributes": {
                    "href": "[$Link]",
                    "target": "_blank"
                },
                "children": [{
                    "elmType": "div",
                    "style": {
                        "width": "95%",
                        "height": "98%",
                        "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
                        "overflow": "hidden",
                        "border-radius": "2px"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighterAlt"
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "min-width": "310px"
                            },
                            "children": [{
                                "elmType": "img",
                                "attributes": {
                                    "src": "[$image]",
                                    "title": "[$image.desc]"
                                },
                                "style": {
                                    "display": "block",
                                    "margin-left": "auto",
                                    "margin-right": "auto",
                                    "width": "auto",
                                    "height": "150px",
                                    "margin-top": "0%"
                                }
                            }]
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "min-width": "300px",
                                "vertical-align": "top",
                                "padding-left": "16px",
                                "padding-top": "16px"
                            },
                            "children": [{
                                "elmType": "div",
                                "style": {
                                    "margin-bottom": "5px",
                                    "font-size": "12px",
                                    "font-weight": "600",
                                    "text-align": "center",
                                    "padding-right": "20px"
                                },
                                "txtContent": "[$Title]"
                            }]
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "min-width": "300px",
                                "vertical-align": "top",
                                "padding-left": "16px",
                                "padding-top": "16px"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "min-width": "300px",
                                "vertical-align": "top",
                                "padding-left": "16px",
                                "padding-top": "16px"
                            }
                        }
                    ]
                }]
            }]
        }
    }
}
| improve this answer | |
  • Thanks Ganesh but I tried this: "attributes": { "href": "[$Link]", "target": "_blank" } and get the same behaviour - link is not followed but the editing dialogue opens to show the Link field and if I click that link it does work! – Bytsy May 19 at 14:16
  • This is weird. can you please add the complete JSON code you are using? Also, what is the data type of "Link" field? – Ganesh Sanap May 19 at 14:19
  • Added as another answer so I could include all the JSON – Bytsy May 19 at 14:28
  • hi @Ganesh - did you need any more details from me on this? many thanks – Bytsy May 20 at 9:16
  • Check updated answer, try this code and let me know if this works for you. – Ganesh Sanap May 22 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.