How to create one-click, direct download links in modern SharePoint Online libraries

I previously blogged how to create one-click direct download links, but that post was exclusive to the classic experience in SharePoint (or any opportunity in which we could use classic html/css).

Normally, to download a document in modern SharePoint Online libraries, we would have to use a file’s menu (right-click or ellipsis) then choose Download.

Click to enlarge

I was recently challenged to help figure out how to create a single click experience to immediately download a document in modern SharePoint Online libraries and after much trial and error was able to do so using a little bit of JSON in a calculated column.

Here’s how to create a Download link column in modern SharePoint libraries:

1. Create a calculated column (Library Settings > Create Column) named Download and set its formula to =””

Click to enlarge

2. Copy and paste the following JSON code into the JSON formatting field of the calculated column settings.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "Download",
  "attributes": {
    "target": "_blank",
    "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]"
  }
}

3. Set the new column to show in the default view so it’s visible in the library and click OK.

Click to enlarge

4. Return to your library, and test it out!

And if you want anonymous users to be able to use these convenient download links, be sure to share a FOLDER link with the anonymous user(s) so they will see the file in the library alongside the one-click download link.

Optional formatting of the Download link

And while I’m not a JSON expert, I did dabble a bit in stylizing the Download link so it would look a little bit better. You can add a little bit of style to the JSON to achieve a more button-like experience (or for the advanced among you, change the element to an actual button or download icon).

Here’s how you can get started stylizing the text link (see result at bottom):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "Download",
  "style": {
    "background-color": "gray",
    "text-decoration": "none",
    "color": "white",
    "font-size": "14px",
    "padding-left": "5px"
  },
  "attributes": {
    "target": "_blank",
    "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]"
  }
}
Click to enlarge

Optional usage of the file’s name instead of “Download”

One small change to the JSON will reference the file’s name for the link instead of using “Download” for all links. Then you could hide Name and just use your Download column.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "[$FileLeafRef]",
  "attributes": {
    "target": "_blank",
    "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]"
  }
}
Click to enlarge

SharePoint conditional column formatting with JSON: Beginner, intermediate, and advanced background colors example

I borrowed from Microsoft’s documentation on conditional column formatting recently to modify a modern experience list in SharePoint 2019. This also works for SharePoint Online/O365, but will not work in classic experiences (or pre-2019 server versions). I modified Microsoft’s example on conditional background colors for a numeric range and created a similar conditional column formatting result for text values.

In this example, I have a list for upcoming training opportunities. There’s a column named “Level” which is a choice field of either Beginner, Intermediate, or Advanced. The JSON code at the bottom of this post changes the column’s background color value to green, yellow, or red respectively based on the level selection. Here’s a demonstration of the result:

Click to enlarge.

You could modify this code to suit your own column’s values/options, then paste it into the Column Formatting section of that column’s settings (List settings > Select column from Columns section). Do not change @currentField in the JSON code – that’s just a reference to whichever column you add it to and doesn’t need to be your column’s name.

Click to enlarge
{  
  "elmType": "div",  
  "txtContent": "@currentField",  
  "style": {  
    "color": "#fff",  
    "padding-left": "14px",  
    "background-color": {  
      "operator": "?",  
      "operands": [  
        {  
          "operator": "==",  
          "operands": [  
            "@currentField",  
            "Beginner"  
          ]  
        },  
        "#2ECC71",  
        {  
          "operator": "?",  
          "operands": [  
            {  
              "operator": "==",  
              "operands": [  
                "@currentField",  
                "Advanced"  
              ]  
            },  
            "#E74C3C",  
            {  
              "operator": "?",  
              "operands": [  
                {  
                  "operator": "==",  
                  "operands": [  
                    "@currentField",  
                    "Intermediate"  
                  ]  
                },  
                "#F1C40F",""
              ]  
            }  
          ]  
        }  
      ]  
    }  
  }  
}