How to make Tile clickable using JSON

Question

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):

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!

Answer 1

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. You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

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