BOTTOM LINE UPFRONT
I Need pdf Attachment on SharePoint list items to show preview upon hovering.

IMPORTANT DETAILS
I'm using SharePoint Online.
The list has a column created by default called "Attachments" (internal name). When a user submits an item, it shows a paperclip on the list view showing that item has attachments.

PROBLEM
Admin personnel need to review thousands of these items, and they now have to open each item and click on the attachment link one at a time to very certification pdf. very time consuming

GOAL
I need them be able to see a preview of the file by just hovering over the item in the list view.

CURRENT STATUS
I've seen a YouTube video tutorial doing this with images on library but have not been able to get it to work on my list. after many attempts of different codes, the closest I got was to get a generic broken image icon to show up that blows up the bigger picture when I hover but only of the broken image icon and not the actual file. This is one of th emany codes I have tried:

{
  "$schema": ".schema.json",
    "elmType": "div",
    "style": {
    "margin": "5px",
    "display": "flex",
    "justify-content": "center",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "cursor": "pointer"
      },
      "attributes": {
        "src": "[$Attachments/0/serverRelativeUrl]?width=50&height=50",
        "alt": "[$FileLeafRef]"
      },
      "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": "[$Attachments/0/serverRelativeUrl]?width=500&height=500",
                "alt": "[$FileLeafRef]"
              }
            }
          ]
        }
      }
    }
  ]
}

Any advice will be greatly appreciated!

BOTTOM LINE UPFRONT
I Need pdf Attachment on SharePoint list items to show preview upon hovering.

IMPORTANT DETAILS
I'm using SharePoint Online.
The list has a column created by default called "Attachments" (internal name). When a user submits an item, it shows a paperclip on the list view showing that item has attachments.

PROBLEM
Admin personnel need to review thousands of these items, and they now have to open each item and click on the attachment link one at a time to very certification pdf. very time consuming

GOAL
I need them be able to see a preview of the file by just hovering over the item in the list view.

CURRENT STATUS
I've seen a YouTube video tutorial doing this with images on library but have not been able to get it to work on my list. after many attempts of different codes, the closest I got was to get a generic broken image icon to show up that blows up the bigger picture when I hover but only of the broken image icon and not the actual file. This is one of th emany codes I have tried:

{
  "$schema": "https://developer.microsoft/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
    "margin": "5px",
    "display": "flex",
    "justify-content": "center",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "cursor": "pointer"
      },
      "attributes": {
        "src": "[$Attachments/0/serverRelativeUrl]?width=50&height=50",
        "alt": "[$FileLeafRef]"
      },
      "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": "[$Attachments/0/serverRelativeUrl]?width=500&height=500",
                "alt": "[$FileLeafRef]"
              }
            }
          ]
        }
      }
    }
  ]
}

Any advice will be greatly appreciated!

• json
• sharepoint
• formatting
• sharepoint-online
• conditional-formatting

1 Answer 1

To achieve your goal of showing a preview of PDF attachments in a SharePoint list upon hovering, you need to use JSON column formatting and custom cards. However, there are some limitations when working with PDF files compared to images, as PDFs cannot be directly rendered as images in the same way.

Below is an example of JSON formatting that displays a link to the PDF attachment in a custom card when hovering over the item. This will allow users to click the link to open the PDF in a new tab or preview pane.

{
  "$schema": "https://developer.microsoft/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin": "5px",
    "display": "flex",
    "justify-content": "center",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "a",
      "style": {
        "cursor": "pointer",
        "text-decoration": "none",
        "color": "#0078d4"
      },
      "attributes": {
        "href": "[$Attachments/0/serverRelativeUrl]",
        "target": "_blank"
      },
      "customCardProps": {
        "directionalHint": "rightCenter",
        "openOnEvent": "hover",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "style": {
            "width": "300px",
            "padding": "10px",
            "background-color": "#f4f4f4",
            "border": "1px solid #ddd",
            "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.1)"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "font-weight": "bold",
                "margin-bottom": "10px"
              },
              "txtContent": "Preview PDF"
            },
            {
              "elmType": "a",
              "attributes": {
                "href": "[$Attachments/0/serverRelativeUrl]",
                "target": "_blank"
              },
              "style": {
                "color": "#0078d4",
                "text-decoration": "none"
              },
              "txtContent": "Click to open PDF"
            }
          ]
        }
      }
    }
  ]
}