I am trying to allow users to include a thumbnail in a list. Since most users will not have general upload permissions anywhere on the site, this will be done through two fields: Attachments, and a picture column named "Thumb Image" (It's actually a "Hypertext or Picture" column with "Format URL as" set to "Picture"). They will upload the attachment, then get the link, and add it in as the URL in "Thumb Image". I then want the image to show up in the list view using the JSON "Format Current View" feature. If there is nothing in the "Thumb Image" column, I will display an icon instead.
The Problem:
The if()
I'm using always returns false
, as length([$ThumbImage]
always seems to return 0
. And when I try to just display the image anyways by removing the if()
, the src in the image tag ends up being (unknown)
Here's the view-formatting JSON. My actual format rules are much bigger and more complex, but I've created this view in order to rule out any problems from that complexity, and the problem still exists:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-borderColor-black"
},
"style": {
"margin": "10px"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "HomeVerify",
"class": "ms-fontSize-su ms-fontWeight-regular ms-fontColor-white",
"title": "[$Category]"
},
"style": {
"display": "=if(length([$ThumbImage]) == 0, 'block', 'none')"
}
},
{
"elmType": "img",
"attributes": {
"src": "[$ThumbImage]",
"title": "[$Category]"
},
"style": {
"max-height": "68px",
"display": "=if(length([$ThumbImage]) > 0, 'block', 'none')"
}
}
]
}
}
In place of [$ThumbImage]
, I've tried using [$ThumbImage.Url]
and [$ThumbImage.desc]
but it always messes up. When I look it up in PowerShell, $item["ThumbImage"]
works, so it doesn't seem like my identifier is wrong.
One really weird thing:
With this setup, if I edit an item and add or change the "Thumb Image" field (either the URL or Display Text), then the image shows up as expected. But as soon as I refresh the page, or view from a different browser, the image is gone again. Even selecting the row and opening and closing the details pane a few times makes the image show up!
After editing the thumb image or toggling the details pane a few times:
<img style="max-height:68px;display:block;" src="/sites/MembersHub/Lists/Classifieds/Attachments/21/Burnsville%20house%20ad%20for%20non%20CMA_Page_1.jpg?web=1" title="Hospitality">
Then, after refreshing the page:
<img style="max-height:68px;display:none;" src="" title="Hospitality">
This is just too weird, and the methods I usually use to debug things like this in PHP (like var_dump()
) don't seem to have equivalents in this limited JSON-based context.
Any help you can offer would be great!