Shaepoint Online: Document Library Equivalent of the Windows Preview Pane

Question

I'm looking at a replacement for our PDF document management system and I'm considering SharePoint. One dealbreaker function is our document input team need is to be able to see (at the same time) a full image of the document and be able to edit a bunch of metadata relating to that document (typically a PDF but could easily be a TIFF/JPG/whatever). The idea being they're filling in metadata based on the document that's in front of them

They don't like the narrow Window of the Document Library Details Pane (they need to see the entire document) and the Thumbnail option is too small to read anything.

• Is there a way to change the height of the preview window in the Details
  Pane?
• Is there a way to change the size of the Thumbnail if using that method?
• Is there any other a way to replicate the Windows Preview Pane in the Document Library Window?

Answer 1

Per my knowledge, there is no way to change the height of details pane preview window.

Here are two methods for you refer:

1.Use JSON codes to make a file preview card.

(1)Create a single line of text column named preview.

(2)Select the column -> Column settings -> Format this column.

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

(3)Result:

2.Use file viewer web part.

(1)Create a new page.

(2)Insert a document library web part and a file viewer web part.

(3)In the file viewer web part -> On the right-hand side, click three dots (ellipsis) and then Connect to source -> Choose the document library.