Forum Discussion
Document Library Custom Hover Card File Preview - Help with JSON
I was following a YouTube video to get Hover Card Document Library prewiew. This is the code I entered but it is not working. The file preview is blank. It must be something simple I am missing.
Here is my library:
This is what it looks like. Blank preview.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"txtContent": " View by Card",
"style": {
"border-radius": "3px",
"cursor": "pointer",
"padding": "5px 10px",
"margin": "5px",
"white-space": "nowrap",
"font-size": "13px"
},
"attributes": {
"class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover ms-fontColor-white"
},
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"formatter": {
"elmType": "filepreview",
"attributes": {
"src": "[$FileRef]"
},
"style": {
"width": "= @window.innerWidth * 0.5 + 'px'",
"height": "= @window.innerHeight * 0.7 + 'px'"
}
}
}
}
]
}
The sample JSON given in question was initially submitted by Tetsuya Kawahara on GitHub. Later he confirmed that this approach is not supported by Microsoft due to security reasons.
Related read: List Formatting - Files can no longer be previewed using filepreview - check comment by Shreyansh Agrawal
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
6 Replies
- kalpeshvaghelaSteel Contributor
If you want only image as preview then you can use below JSON:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "div", "txtContent": " View by Card", "style": { "border-radius": "3px", "cursor": "pointer", "padding": "5px 10px", "margin": "5px", "white-space": "nowrap", "font-size": "13px" }, "attributes": { "class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover ms-fontColor-white" }, "customCardProps": { "directionalHint": "rightCenter", "openOnEvent": "hover", "isBeakVisible": true, "formatter": { "elmType": "div", "style": { "width": "520px", "height": "520px", "padding": "10px", "display": "flex", "justify-content": "center", "align-items": "center" }, "children": [ { "elmType": "img", "attributes": { "src": "@thumbnail.500" } } ] } } } ] }
Reference Link:
https://github.com/pnp/List-Formatting/tree/master/column-samples/file-thumbnail
Hope it will be helpful to you and if so please like this answer and mark it as best response for better reach of this question to other people.
- VeeExcelLearnCopper ContributorThis is a great solution although I think the code that I posed is supposed to allow you to scroll through the file. Not sure what is the issue with my code...It sees the file but does not allow it to come through. Thank you for responding and your time.
- kalpeshvaghelaSteel Contributor
IF you want to view all the content of the file then you will need iframe element and it is not possible using SharePoint Column Formatting as per official documentation Formatting syntax reference
Hope it will helpful to you, if so then please mark this as best response and like this answer for better reach of the question to other people.