Make your own download button

Learn how to create a button with JSON that downloads a file

I know that it is already there. The download button. Just select the file, and click download in the ribbon - or right click, and select download.

But what if we could change 2 clicks into 1 click? If you have a library where people often download files, like a image sharing environment or similar, we can create a download file directly on the list

Here is the 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] != '', 'flex', 'none')"
  },
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "href": "= @currentWeb + '/_layouts/15/download.aspx?UniqueId=' + [$UniqueId]",
        "target": "_self",
        "class": "ms-bgColor-themePrimary ms-fontWeight-bold ms-bgColor-themeDarker--hover"
      },
      "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": "Download",
            "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": "Download"
        }
      ]
    }
  ]
}

Microsoft just recently introduced the open in any app function, and what I am going to show you now, might be a security issue, but you could potentially right click on a specific file and select always open files of this type

Then we could create a button that is only looking on a specific file type like an Outlook file (.msg)

When we click the button the file is then downloaded locally, and automatically opened up in Outlook

{
  "$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] == 'msg', 'flex', 'none')"
  },
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "href": "= @currentWeb + '/_layouts/15/download.aspx?UniqueId=' + [$UniqueId]",
        "target": "_self",
        "class": "ms-bgColor-themePrimary ms-fontWeight-bold ms-bgColor-themeDarker--hover"
      },
      "style": {
        "_comments": "ALWAYS OPEN WITH SYSTEM VIEWER",
        "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": "Mail",
            "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 in Outlook"
        }
      ]
    }
  ]
}

‎

See also