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!

2
  • What is stored in $link column? May 19 '20 at 13:32
  • The URL to the video I want the user to see when they click the tile
    – Bytsy
    May 19 '20 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"
                            }
                        }
                    ]
                }]
            }]
        }
    }
}
5
  • 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 '20 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? May 19 '20 at 14:19
  • Added as another answer so I could include all the JSON
    – Bytsy
    May 19 '20 at 14:28
  • hi @Ganesh - did you need any more details from me on this? many thanks
    – Bytsy
    May 20 '20 at 9:16
  • Check updated answer, try this code and let me know if this works for you. May 22 '20 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.