1

I've got a SharePoint list with a Image and Hyperlink column. Now I'm trying to make the Image clickable with the Hyperlink column. I've came up with the setup below, but unfortunately I get about:blank#blocked when using clicking the Image.

I'v tried formatting the Hyperlink column to show the Image with a similar formatting and that works fine. Any idea's what's wrong with this setup?

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "a",
      "attributes": {
        "target": "_blank",
        "href": "[$Link]"
      },
      "children": [
        {
          "elmType": "img",
          "style": {
            "display": "block",
            "background-color": "none",
            "position": "relative",
            "width": "60px"
          },
          "attributes": {
            "src": "@currentField.serverRelativeUrl"
          }
        }
      ]
    }
Improve this question
2
  • Just to confirm: Is Link column of type hyperlink and you are applying above JSON on image column? Commented Jul 11, 2023 at 14:27
  • Can you provide the URLs you are using in hyperlink column? I just tried your JSON and it is working fine for me. Commented Jul 11, 2023 at 14:31

1 Answer 1

Reset to default
0

I just tried using the JSON you provided in your question and it is working fine for me:

enter image description here

It opens the hyperlink in "Link" column in new browser tab without any issues.

I am guessing you are using incorrect internal name of your hyperlink column in your JSON. You can get the internal name of your hyperlink column by following this article and use it in your JSON: How to find the Internal name of columns in SharePoint Online?

Example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "target": "_blank",
    "href": "[$MyLinkColumn]"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "display": "block",
        "background-color": "none",
        "position": "relative",
        "width": "60px"
      },
      "attributes": {
        "src": "@currentField.serverRelativeUrl"
      }
    }
  ]
}

Where MyLinkColumn is the internal name of my hyperlink column with display name as "Link" (shown in above image).

Improve this answer
3
  • You're welcome, glad it worked for you. Keep using this platform to ask any queries/questions related to SharePoint. Commented Jul 12, 2023 at 6:17
  • Ganesh Sanap do you also have a suggestion how to check if MyLinkColumn has content and if not don't create the link? At the moment if the MyLinkColumn is empty you are still able to click on the image but you will get an error. Tried something like this, but it ofcourse hides the image too { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", "style":{ "display": "=if([$MyLinkColumn]=='','none','block'" }, "attributes": { "target": "_blank", "href": "[$MyLinkColumn]" }, Commented Jul 18, 2023 at 12:24
  • Can you please Ask a new question? You can add link to this question for reference in your new question if needed. I will explain in detail and provide JSON in new question. Commented Jul 18, 2023 at 12:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.