Aug 14 2022 06:02 AM - edited Aug 14 2022 06:02 AM
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'"
}
}
}
}
]
}
Aug 15 2022 02:10 AM - edited Aug 15 2022 02:25 AM
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.
Aug 15 2022 03:22 AM
Aug 15 2022 03:32 AM
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.
Aug 15 2022 04:54 AM
Aug 15 2022 08:52 PM
Yes but this feature is not supported now. Rezza also mentioned it as first comment in that YouTube video
Aug 15 2022 10:31 PM
Solution@VeeExcelLearn @kalpeshvaghela
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.
Aug 15 2022 10:31 PM
Solution@VeeExcelLearn @kalpeshvaghela
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.