Forum Discussion

VeeExcelLearn's avatar
VeeExcelLearn
Copper Contributor
Aug 14, 2022
Solved

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

 

 

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-using-column-format/ 

     

    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.

     

    • VeeExcelLearn's avatar
      VeeExcelLearn
      Copper Contributor
      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.
      • kalpeshvaghela's avatar
        kalpeshvaghela
        Steel Contributor

        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.

         

         

         

Resources