Forum Discussion

dKayt's avatar
dKayt
Copper Contributor
May 07, 2025
Solved

Open PDF documents in a new tab

Hi all,
is it possible to open a PDF Document in a new tab using JSON formatting?
Best Regarding,
dKayt

  • Hi dKayt​, try this code -> 

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "a",
      "attributes": {
        "href": "=[$FileRef]",
        "target": "_blank"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "[$FileLeafRef]"
        }
      ]
    }

     

3 Replies

  • dKayt's avatar
    dKayt
    Copper Contributor

    This is the final code. I've put it here as a backup for myself and for anyone else who might need it.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
      "hideSelection": true,
      "hideColumnHeader": true,
      "rowFormatter": {
        "elmType": "a",
        "attributes": {
          "href": "[$FileRef]",
          "target": "_blank"
        },
        "style": {
          "display": "flex",
          "align-items": "center",
          "text-decoration": "none",
          "border": "1px solid #e0e0e0",
          "border-radius": "5px",
          "margin": "8px",
          "color": "red"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "@thumbnail.medium"
            },
            "style": {
              "width": "100px",
              "height": "100px",
              "max-height": "120px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$FileLeafRef]",
            "style": {
              "font-size": "15px",
              "font-weight": "600",
              "margin": "20px",
              "color": "#000"
            }
          }
        ]
      }
    }

     

  • dKayt's avatar
    dKayt
    Copper Contributor

    This is the final code. I've put it here as a backup for myself and for anyone else who might need it ^^

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
      "hideSelection": true,
      "hideColumnHeader": true,
      "rowFormatter": {
        "elmType": "a",
        "attributes": {
          "href": "[$FileRef]",
          "target": "_blank"
        },
        "style": {
          "display": "flex",
          "align-items": "center",
          "text-decoration": "none",
          "border": "1px solid #e0e0e0",
          "border-radius": "5px",
          "margin": "8px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "@thumbnail.medium"
            },
            "style": {
              "width": "100px",
              "height": "100px",
              "max-height": "120px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$FileLeafRef]",
            "style": {
              "font-size": "13px",
              "font-weight": "600",
              "margin": "20px",
              "color": "#000"
            }
          }
        ]
      }
    }

     

  • michalkornet's avatar
    michalkornet
    Iron Contributor

    Hi dKayt​, try this code -> 

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "a",
      "attributes": {
        "href": "=[$FileRef]",
        "target": "_blank"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "[$FileLeafRef]"
        }
      ]
    }

     

Resources