Forum Discussion
File preview on Hover in Sharepoint Online lists JSON
Hi!
I recently saw a filepreview in SharePoint list that was similiar to the one that was available in SharePoint OnPremise.
Not thumbnails but a bigger picture that pops up an previews the file when I hoover the file. Has anyone accomplished this or can guide me how to do this?
It looks like in the pictures i´m adding here.
I have been following following guides,
https://www.youtube.com/watch?v=bO2L3eJoT2Y
https://www.youtube.com/watch?v=_zEOxVGhpd4
But I want to be able to get a bigger hovercard preview of the thumbnails.
This is my code:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "img",
"attributes": {
"src": "@thumbnail.medium"
},
"style": {
"display": "block",
"margin": "0 auto",
"max-height": "80px",
"customCardProps": {
"openOnEvent": "hover",
"formatter": {
"elmtype": "img",
"attributes": {
"src": "@thumbnail.medium"
},
"style": {
"font-size": "500px",
"padding": "32px",
"max-height": "500px"
}
}
}
}
}
I have tried following code but cant get a hovercard. I´m new at Json so have no clue.
Can someone please help.
Look at the attached image to se how it should look like.
THX!
Thx for any help!
Hi conny82 ,
Do you want to have a custom preview from Name column?
I already tuned your code a little bit and now it displays hover on a separate column and generates also thumbnail on it. Your code also had one "elmtype" element, which I changed to elmType. Remember to be precise with capitalization. I also added isBeakVisible attribute to customCardProps element, which enables that little beak pointing to selected line.
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "img", "attributes": { "src": "@thumbnail.medium" }, "style": { "display": "block", "margin": "0 auto", "max-height": "80px" }, "customCardProps": { "openOnEvent": "hover", "isBeakVisible": true, "formatter": { "elmType": "img", "attributes": { "src": "@thumbnail.500x500" }, "style": { "max-height": "500px" } } } }
Hi conny82 ,
Do you want to have a custom preview from Name column?
I already tuned your code a little bit and now it displays hover on a separate column and generates also thumbnail on it. Your code also had one "elmtype" element, which I changed to elmType. Remember to be precise with capitalization. I also added isBeakVisible attribute to customCardProps element, which enables that little beak pointing to selected line.
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "img", "attributes": { "src": "@thumbnail.medium" }, "style": { "display": "block", "margin": "0 auto", "max-height": "80px" }, "customCardProps": { "openOnEvent": "hover", "isBeakVisible": true, "formatter": { "elmType": "img", "attributes": { "src": "@thumbnail.500x500" }, "style": { "max-height": "500px" } } } }Matti Paukkonen OMG! You are my God! 😄
Big thanks to you, it works exactly how I wanted!
Thank you very much again for your tips and solution and take care!
Best regards,
Conny (Sweden) 🙂
