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
The code
Insert the following code in the column formatting field
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