2

I have a Sharepoint list that has a column filled with URLs (which point to images stored elsewhere on the Sharepoint site).

The column settings and JSON are shown in the below image: Column Settings and JSON for column formatting

When I fill in the field for the list items, the URL creates itself as a hyperlink - with the "Enter a url" AND "Enter display text" fields BOTH populated with the link: enter image description here

If I delete the text out of the "Enter display text" field, the picture displays as expected in the list. Is there a way that I can modify the JSON to remove the need to delete the URL text? I have hundres of items in the list, so doing this deleting for all fields would not be realistic.

Thank you

Here is my JSON

{
"elmType": "img",
"txtContent": "",
"style": {
    "width": "100px"
},
"attributes": {
    "src": {
        "operator": "+",
        "operands": [
            "@currentField",
            "@currentField.desc"
        ]
    }
}
}
  • What is the use of this json code? What are you doing using this json? – Ganesh Sanap Jan 8 at 15:57
  • I am using it for column formatting within the Sharepoint list. Is this an inelegant method for formatting columns? – Alasdair Duncan Jan 9 at 8:45
  • No, It is the right way to use json for column formatting. – Ganesh Sanap Jan 9 at 11:35
2

You almost got it. Set src attribute directly. src is just URL to an image, so why to use description at all. If you look at the rendered HTML code using Developer dashboard (F12) you will find that the src of img tag contains url and description.

enter image description here

Simply use:

{
  "elmType": "img",
  "style": {
      "width": "100px"
  },
  "attributes": {
      "src": "@currentField"
  }
}

If you want clickable image use this:

{
  "elmType": "a",
  "attributes": {
      "href": "@currentField",
      "target": "_blank"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "100px"
      },
      "attributes": {
        "src": "@currentField"
      }
    }
  ]
}

I recommend to use $schema and some intelligent IDE e.g. Visual Studio Code. Using it will give you hints what you can use.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField"
}

Reference:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#create-clickable-actions

  • Fantastic, Thank you! Is there a way to modify this JSON so that clicking on the image takes you to the image (when viewing the list as a whole - it already does so when viewing one list item in a popout window). – Alasdair Duncan Jan 9 at 8:42
  • I tried this, but it's not working: '{ "elmType": "img", "style": { "width": "100px" }, "attributes": { "src": "@currentField", "href": "@currentField", "target": "_blank" } }' – Alasdair Duncan Jan 9 at 8:50
  • img tag does not have href or target attributes. You are mixing image with link. So, what do you want from it? Image or link? Or link with image? – Lukas Nespor Jan 9 at 8:54
  • @AlasdairDuncan se modified answer. – Lukas Nespor Jan 9 at 9:03
  • @AlasdairDuncan sorry, I just read you previous comment :) I somehow missed it. But my modified answer will help you ;) – Lukas Nespor Jan 9 at 9:15

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.