SOLVED

File preview on Hover in Sharepoint Online lists JSON

New Contributor

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!Skärmklipp.PNG

3 Replies
best response confirmed by conny82 (New Contributor)
Solution

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.

 

Annotation 2020-08-05 082749.png

 

{
    "$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! :D

 

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) :)

 

@conny82 Hello! I'm hoping you can point me in the right direction. I'm hoping to format a sharepoint list with a hyperlink that opens a pdf file. Do you know of a way to modify the above code to show a preview of the pdf directly in the list?