Back to column formats
Column formattingSharePoint Online

File Preview

This sample opens Microsoft Office documents in full screen within a new tab. This is the same view as used in the fileviewer webpart (no toolbars).

File Preview formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
    "title": "Fullscreen Preview",
    "target": "_blank",
    "href": "=if([$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'dotx' || [$File_x0020_Type] == 'dotm' || [$File_x0020_Type] == 'docm' || [$File_x0020_Type] == 'docb' || [$File_x0020_Type] == 'pptx' || [$File_x0020_Type] == 'pptm' || [$File_x0020_Type] == 'potx' || [$File_x0020_Type] == 'potm' || [$File_x0020_Type] == 'ppam' || [$File_x0020_Type] == 'ppsx' || [$File_x0020_Type] == 'ppsm' || [$File_x0020_Type] == 'sldx' || [$File_x0020_Type] == 'sldm' || [$File_x0020_Type] == 'vsdx' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'xlsm' || [$File_x0020_Type] == 'xltx' || [$File_x0020_Type] == 'xltm', @currentWeb +'/_layouts/15/Doc.aspx?sourcedoc=' + [$UniqueId] + '&action=embedview', [$FileRef])"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer",
    "text-decoration": "none"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if([$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'dotx' || [$File_x0020_Type] == 'dotm' || [$File_x0020_Type] == 'docm' || [$File_x0020_Type] == 'docb' || [$File_x0020_Type] == 'pptx' || [$File_x0020_Type] == 'pptm' || [$File_x0020_Type] == 'potx' || [$File_x0020_Type] == 'potm' || [$File_x0020_Type] == 'ppam' || [$File_x0020_Type] == 'ppsx' || [$File_x0020_Type] == 'ppsm' || [$File_x0020_Type] == 'sldx' || [$File_x0020_Type] == 'sldm' || [$File_x0020_Type] == 'vsdx' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'xlsm' || [$File_x0020_Type] == 'xltx' || [$File_x0020_Type] == 'xltm', 'View' , 'OpenInNewWindow')"
      }
    }
  ]
}

From the contributor

How to use this sample

Summary

This sample opens Microsoft Office documents in full screen within a new tab. This is the same view as used in the fileviewer webpart (no toolbars).

screenshot of the sample

screenshot of the file preview

View requirements

  • This format is intended for document libraries
  • The format can be applied to any column, although it is recommended to add it to a calculated column with a ="" formula
  • Only specific file types are supported (see below)

Supported File Types

This format relies on Doc.aspx which supports the viewing of Microsoft Office documents. The format only displays for the following extensions:

  • Word: docx, dotx, dotm, docm, docb
  • PowerPoint: pptx, pptm, potx, potm, ppam, ppsx, ppsm, sldx, sldm
  • Visio: vsdx
  • Excel: xlsx, xlsm, xltx, xltm

This list of extensions can be adjusted by either removing or adding another condition in the display style property.

Sample

Solution Author(s)
generic-file-preview.json Geert de Kooter

Version history

Version Date Comments
1.0 August 08, 2020 Initial release
2.0 January 26, 2022 When the filetype is not of the supported filetypes, it will open in a new window, the icon changes to reflect this behavior.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Additional notes

none