Back to column formats
Column formattingSharePoint Online

File Preview Callout with the embed Action

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

screenshot of a document library file preview in a callout
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": "div",
  "style": {
    "display": "=if([$File_x0020_Type]==''||[$File_x0020_Type]=='agent'||[$File_x0020_Type]=='clipchamp'||[$File_x0020_Type]=='url','none','')",
    "margin": "0px 8px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "border-radius": "5px",
        "cursor": "pointer",
        "padding": "5px"
      },
      "attributes": {
        "class": "ms-bgColor-themeLighter ms-bgColor-themePrimary--hover ms-fontColor-neutralPrimary ms-fontColor-white--hover ms-fontSize-m",
        "iconName": "Preview"
      },
      "customCardProps": {
        "openOnEvent": "hover",
        "directionalHint": "topCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "background-color": "black"
        },
        "formatter": {
          "elmType": "div",
          "txtContent": "File Preview Callout",
          "style": {
            "padding": "5px 10px",
            "background-color": "black",
            "color": "white"
          },
          "attributes": {
            "class": "ms-fontSize-s"
          }
        }
      },
      "customRowAction": {
        "action": "embed",
        "actionInput": {
          "src": "=if([$File_x0020_Type]=='aspx',@currentWeb+'/SitePages/'+[$FileLeafRef]+'?env=WebView',if([$File_x0020_Type]=='docx'||[$File_x0020_Type]=='doc'||[$File_x0020_Type]=='dotx'||[$File_x0020_Type]=='dot'||[$File_x0020_Type]=='dotm'||[$File_x0020_Type]=='docm'||[$File_x0020_Type]=='docb'||[$File_x0020_Type]=='pptx'||[$File_x0020_Type]=='ppt'||[$File_x0020_Type]=='pptm'||[$File_x0020_Type]=='potx'||[$File_x0020_Type]=='pot'||[$File_x0020_Type]=='potm'||[$File_x0020_Type]=='ppam'||[$File_x0020_Type]=='ppsx'||[$File_x0020_Type]=='pps'||[$File_x0020_Type]=='ppsm'||[$File_x0020_Type]=='sldx'||[$File_x0020_Type]=='sldm'||[$File_x0020_Type]=='vsdx'||[$File_x0020_Type]=='vsd'||[$File_x0020_Type]=='xlsx'||[$File_x0020_Type]=='xls'||[$File_x0020_Type]=='xlsm'||[$File_x0020_Type]=='xlsb'||[$File_x0020_Type]=='xltx'||[$File_x0020_Type]=='xltm'||[$File_x0020_Type]=='csv',@currentWeb+'/_layouts/15/Doc.aspx?sourcedoc='+[$FileRef]+'&action=embedview',@currentWeb+'/_layouts/15/embed.aspx?UniqueId='+[$UniqueId]))",
          "height": "=@window.innerHeight*0.7",
          "width": "=@window.innerWidth*0.5"
        }
      }
    }
  ]
}
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /children/0/customRowAction/action must be equal to one of the allowed values
  • /children/0/customRowAction must match a schema in anyOf

From the contributor

How to use this sample

Summary

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

screenshot of the sample

Pages can also be previewed in a callout.

screenshot of a Site Pages page preview in a callout

[!WARNING] Support for the embed action in Site Pages may not yet be available in some tenants as of October 2, 2025, so page previews might not work in those environments.

Prerequisites

To embed content, the domain of the SharePoint site (e.g., contoso.sharepoint.com) must be allowed for embedding. For guidance on how to allow embedding, please refer to Allow or restrict the ability to embed content on SharePoint Lists using custom formatters.

screenshot of HTML field security settings

If you attempt to embed content from a domain that is not allowed, the following error screen will appear:

screenshot of the error screen when target site is not allowed to embed

View requirements

  • This format is designed for use with document libraries and Site Pages.
  • This format can be applied to any column type.

Sample

Solution Author(s)
generic-embed-file-preview.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 June 30, 2025 Initial release
1.1 October 2, 2025 Extended to support page (aspx) previews

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