Create a custom button to open files in a SharePoint Library

Learn how to create a formatted button to open files in a SharePoint library

Formatting

For this formatted button we will utilize $FileRef, and $File_x0020_Type, to create our own formatted button that can open a file in a SharePoint library

Here is what we are going to create

SharePoint document library with a custom Open file button on each row that opens the file directly in a new tab

The code

Insert the following code in the column formatting field

SharePoint column formatting panel in advanced mode with the JSON code for the Open file button entered in the editor

I suggest you use a text column type

JSON code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "align-items": "center",
    "margin-top": "2px",
    "margin-bottom": "2px",
    "display": "=if([$File_x0020_Type] == '', 'none', 'flex')"
  },
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "href": "[$FileRef]",
        "target": "_blank",
        "class": "ms-bgColor-themePrimary ms-fontWeight-bold ms-bgColor-themeDarker--hover",
        "data-interception": "off"
      },
      "style": {
        "height": "30px",
        "text-decoration": "none",
        "display": "flex",
        "align-items": "center",
        "text-align": "center",
        "justify-content": "center",
        "margin": "5px",
        "color": "#fff",
        "border-radius": "3px"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "FileSymlink",
            "class": "ms-fontSize-16 ms-fontWeight-regular",
            "title": "Details"
          },
          "style": {
            "color": "#fff",
            "flex": "none",
            "margin-right": "8px",
            "margin-left": "10px"
          }
        },
        {
          "elmType": "span",
          "style": {
            "margin-right": "10px"
          },
          "txtContent": "Open file"
        }
      ]
    }
  ]
}

A short explanation of the code

Hiding the button

We don’t want to show the button if the list does not have a file type (like a folder), therefore we are hiding the button if the file type is blank

"display": "=if([$File_x0020_Type] == '', 'none', 'flex')"

FileRef

The $FileRef is a direct link to the file, so with anchor code "elmType": "a" we are simply creating a link with "href": "[$FileRef]"

Icon

You can change the icon name FileSymLink with any of the icons you like from this page

‎

Beginner SharePoint