SOLVED

Document Library Custom Hover Card File Preview - Help with JSON

Brass Contributor

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:

VeeExcelLearn_1-1660482031223.png

This is what it looks like. Blank preview.

VeeExcelLearn_2-1660482076180.png

 

 

 

{
  "$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'"
          }
        }
      }
    }
  ]
}

 

 

6 Replies

@VeeExcelLearn 

 

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 

 

https://www.c-sharpcorner.com/article/thumbnail-or-preview-of-files-in-sharepoint-document-library-u... 

 

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.

 

This 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.

@VeeExcelLearn 

 

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.

 

 

 

Is this what Rezza is doing, this is where I got the idea from:
https://youtu.be/-fcfEQTSWx0?t=238

@VeeExcelLearn 

 

Yes but this feature is not supported now. Rezza also mentioned it as first comment in that YouTube video :smile:

 

kalpeshvaghela_0-1660621906666.png

 

best response confirmed by VeeExcelLearn (Brass Contributor)
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 readList 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.

1 best response

Accepted Solutions
best response confirmed by VeeExcelLearn (Brass Contributor)
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 readList 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.

View solution in original post