[How to] How to format list to display hyperlink?

[sonyszkiewicz]

I would like to format sharepoint list to display picture, and linkt to other sharpoint site on top of it

Something like:

I am using following JSON formating, however no link is being display and i am getting results like on the picture below:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "hideSelection": true, "width": "355", "height": "355", "formatter": { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "inline-block", "min-width": "355px", "min-height": "355px", "margin-right": "10px", "box-shadow": "2px 2px 4px darkgrey" }, "children": [ { "elmType": "img", "attributes": { "src": "[$Image.serverRelativeUrl]" }, "style": { "height": "360px", "max-width": "360px" } }, { "elmType": "div", "style": { "position": "absolute", "margin-top": "10px", "height": "355px", "width": "355px", "bottom": "0", "padding-top": "10px", "background-color": "rgba(0,0,0,0.5)" }, "children": [ { "elmType": "div", "style": { "text-align": "left" }, "children": [ { "elmType": "a", "style": { "color": "#fff", "margin-top": "5px", "margin-left": "10px", "width": "355px", "top": "0", "font-size": "70px", "line-height": "70px" }, "attributes": { "target": "_blank", "href": "[$Link]" } } ] } ] } ] } ] } }

[tecchan1107]

Hi @sonyszkiewicz ! I changed the location of the "a" and modified it so that clicking on the image opens the link. Is it what you imagined?

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "width": 355,
  "height": 355,
  "formatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "a",
        "style": {
          "display": "inline-block",
          "min-width": "355px",
          "min-height": "355px",
          "margin-right": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "attributes": {
          "target": "_blank",
          "href": "[$Link]"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Image.serverRelativeUrl]"
            },
            "style": {
              "height": "360px",
              "max-width": "360px"
            }
          }
        ]
      }
    ]
  }
}

[sonyszkiewicz]

Hello @tecchan1107 , thank you for the reply.

looks like there is a progress, it si not opening the page but its empty - about:blank#blocked

[tecchan1107]

The fact that it shows about:blank#blocked makes me think that it is blocked when opening the link.

How about the following codes?

Version without "target": "_blank"

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "hideSelection": true, "width": 355, "height": 355, "formatter": { "elmType": "div", "children": [ { "elmType": "a", "style": { "display": "inline-block", "min-width": "355px", "min-height": "355px", "margin-right": "10px", "box-shadow": "2px 2px 4px darkgrey" }, "attributes": { "href": "[$Link]" }, "children": [ { "elmType": "img", "attributes": { "src": "[$Image.serverRelativeUrl]" }, "style": { "height": "360px", "max-width": "360px" } } ] } ] } } ```

Version with "rel": "noopener" added

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "hideSelection": true, "width": 355, "height": 355, "formatter": { "elmType": "div", "children": [ { "elmType": "a", "style": { "display": "inline-block", "min-width": "355px", "min-height": "355px", "margin-right": "10px", "box-shadow": "2px 2px 4px darkgrey" }, "attributes": { "target": "_blank", "href": "[$Link]", "rel": "noopener" }, "children": [ { "elmType": "img", "attributes": { "src": "[$Image.serverRelativeUrl]" }, "style": { "height": "360px", "max-width": "360px" } } ] } ] } } ```

[tecchan1107]

In addition, please make sure that the internal name of the Link column is Link! https://learn.microsoft.com/en-us/microsoft-365/community/sharepoint-naming-guidelines#internal-names

[sonyszkiewicz]

In addition, please make sure that the internal name of the Link column is Link! https://learn.microsoft.com/en-us/microsoft-365/community/sharepoint-naming-guidelines#internal-names

This! There was mismatch with name. Thank you! All working now fine