SOLVED

File preview on Hover in Sharepoint Online lists JSON

%3CLINGO-SUB%20id%3D%22lingo-sub-1565141%22%20slang%3D%22en-US%22%3EFile%20preview%20on%20Hover%20in%20Sharepoint%20Online%20lists%20JSON%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1565141%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Sk%C3%A4rmklipp.PNG%22%20style%3D%22width%3A%20924px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F210205i3B4B826F9A1C5454%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Sk%C3%A4rmklipp.PNG%22%20alt%3D%22Sk%C3%A4rmklipp.PNG%22%20%2F%3E%3C%2FSPAN%3EHi!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20recently%20saw%20a%20filepreview%20in%20SharePoint%20list%20that%20was%20similiar%20to%20the%20one%20that%20was%20available%20in%20SharePoint%20OnPremise.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENot%20thumbnails%20but%20a%20bigger%20picture%20that%20pops%20up%20an%20previews%20the%20file%20when%20I%20hoover%20the%20file.%20Has%20anyone%20accomplished%20this%20or%20can%20guide%20me%20how%20to%20do%20this%3F%3C%2FP%3E%3CP%3EIt%20looks%20like%20in%20the%20pictures%20i%C2%B4m%20adding%20here.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20been%20following%20following%20guides%2C%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DbO2L3eJoT2Y%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DbO2L3eJoT2Y%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_zEOxVGhpd4%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_zEOxVGhpd4%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20I%20want%20to%20be%20able%20to%20get%20a%20bigger%20hovercard%20preview%20of%20the%20thumbnails.%3C%2FP%3E%3CP%3EThis%20is%20my%20code%3A%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22img%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22src%22%3A%20%22%40thumbnail.medium%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22block%22%2C%3CBR%20%2F%3E%22margin%22%3A%20%220%20auto%22%2C%3CBR%20%2F%3E%22max-height%22%3A%20%2280px%22%2C%3CBR%20%2F%3E%22customCardProps%22%3A%20%7B%3CBR%20%2F%3E%22openOnEvent%22%3A%20%22hover%22%2C%3CBR%20%2F%3E%22formatter%22%3A%20%7B%3CBR%20%2F%3E%22elmtype%22%3A%20%22img%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22src%22%3A%20%22%40thumbnail.medium%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22font-size%22%3A%20%22500px%22%2C%3CBR%20%2F%3E%22padding%22%3A%20%2232px%22%2C%3CBR%20%2F%3E%22max-height%22%3A%20%22500px%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20tried%20following%20code%20but%20cant%20get%20a%20hovercard.%20I%C2%B4m%20new%20at%20Json%20so%20have%20no%20clue.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20someone%20please%20help.%3C%2FP%3E%3CP%3ELook%20at%20the%20attached%20image%20to%20se%20how%20it%20should%20look%20like.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETHX!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThx%20for%20any%20help!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1565141%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDocument%20Library%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1566471%22%20slang%3D%22en-US%22%3ERe%3A%20File%20preview%20on%20Hover%20in%20Sharepoint%20Online%20lists%20JSON%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1566471%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F748690%22%20target%3D%22_blank%22%3E%40conny82%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDo%20you%20want%20to%20have%20a%20custom%20preview%20from%20Name%20column%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20already%20tuned%20your%20code%20a%20little%20bit%20and%20now%20it%20displays%20hover%20on%20a%20separate%20column%20and%20generates%20also%20thumbnail%20on%20it.%20Your%20code%20also%20had%20one%20%22elmtype%22%20element%2C%20which%20I%20changed%20to%20elmType.%20Remember%20to%20be%20precise%20with%20capitalization.%20I%20also%20added%20isBeakVisible%20attribute%20to%20customCardProps%20element%2C%20which%20enables%20that%20little%20beak%20pointing%20to%20selected%20line.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Annotation%202020-08-05%20082749.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F210339i5EBDC7B72147FEB7%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Annotation%202020-08-05%20082749.png%22%20alt%3D%22Annotation%202020-08-05%20082749.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%20%22elmType%22%3A%20%22img%22%2C%0A%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22src%22%3A%20%22%40thumbnail.medium%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22display%22%3A%20%22block%22%2C%0A%20%20%20%20%20%20%20%20%22margin%22%3A%20%220%20auto%22%2C%0A%20%20%20%20%20%20%20%20%22max-height%22%3A%20%2280px%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22customCardProps%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22openOnEvent%22%3A%20%22hover%22%2C%0A%20%20%20%20%20%20%20%20%22isBeakVisible%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22formatter%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22img%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22src%22%3A%20%22%40thumbnail.500x500%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22max-height%22%3A%20%22500px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1566625%22%20slang%3D%22en-US%22%3ERe%3A%20File%20preview%20on%20Hover%20in%20Sharepoint%20Online%20lists%20JSON%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1566625%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5628%22%20target%3D%22_blank%22%3E%40Matti%20Paukkonen%3C%2FA%3E%26nbsp%3BOMG!%20You%20are%20my%20God!%20%3AD%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBig%20thanks%20to%20you%2C%20it%20works%20exactly%20how%20I%20wanted!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20very%20much%20again%20for%20your%20tips%20and%20solution%20and%20take%20care!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%2C%3C%2FP%3E%3CP%3EConny%20(Sweden)%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
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

In this 18-minute demo delivered by Chris Kent, viewers learn how to take advantage of out-of-the-box hover cards and create custom hover cards in your colum...
This community call demo is taken from the SharePoint General SIG community call recording on 13th of June 2019. In this video, Chris Kent (DMI) demonstrates...
2 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) :)