Clickable Button on Gallery View Document Library

[KatherineS-Q]

Hello, 

I have a document library where social media assets are stored. I would like to create a gallery view of the document library that displays a "Download" button, so when the user selects, the file is automatically downloaded to their device. I have figured out how to add the Download button, which works perfectly in the List view. When you switch to gallery view, the button does not display, but I was able to get the button to show up by adding "columnFormatterReference": "[$Download]" to the Format view JSON. However, when the user clicks on the Download button from the gallery view, the file opens. I removed the following JSON code, so the file does not open in a new tab: 

"customRowAction": {

"action": "defaultClick"

Now I just need to figure out how to make the "Download" button clickable. Any help would be greatly appreciated. I'm brand-new to JSON and coding in general.

[#2]

Hi @KatherineS-Q ,

I recently solved that using an HTML "a" tag and the "download.aspx" link. The latter forces that file to be downloaded instead of being displayed. Then I formatted the "a" link to look like a button.

{
    "elmType": "a",
    "txtContent": "Download",
    "attributes": {
      "class": "sp-card-defaultClickButton",
      "role": "presentation",
      "target": "_blank",
      "href": "='/sites/<mysite>/_layouts/download.aspx?SourceUrl='+[$FileRef]"
    },
    "style": {
      "padding": "10px",
      "height": "32px",
      "margin-right": "8px",
      "margin-botton": "10px",
      "font-size": "14px",
      "border-radius": "2px",
      "border": "none",
      "font-weight": "600",
      "background-color": "#0078d4",
      "cursor": "pointer",
      "color": "white",
      "text-decoration": "none",
      "text-align": "center",
      "width": "65px"
    }
  }

Best Regards,
Sven

[#3]

@KatherineS-Q

Check this article which shows how to download SharePoint files using JSON formatting:

SharePoint Online: Download files using JSON Formatting 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#4]

@SvenSieverding 

Thank you for your response! Two questions: 

1. Does this work with the Gallery view? 
2. Where should this code be entered in the JSON? 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 402,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "filepreview",
                    "attributes": {
                      "src": "@thumbnail.512x432"
                    },
                    "style": {
                      "height": "200px"
                    },
                    "filePreviewProps": {
                      "fileTypeIconClass": "sp-fileTypeIcon-cardDesigner",
                      "brandTypeIconClass": "sp-brandTypeIcon-cardDesigner"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!FileLeafRef.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-keyboard-focusable"
                },
                "txtContent": "[$FileLeafRef]",
                "defaultHoverField": "[$FileLeafRef]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                }
              },
              {
                "columnFormatterReference": "[$Download]"
              }
            ]
          }
        ]
      }
    ]
  }
}

I am not a developer and a newbie when it comes to HTML, CSS, and JSON.  

[#5]

@ganeshsanap 

Thank you for your response @ganeshsanap! Adding the button in the List view works perfectly, but it doesn't work in Gallery view. 

[#6 · Accepted solution]

Hi @KatherineS-Q ,

I would put that here

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 402,
  "width": 254,  
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "filepreview",
                    "attributes": {
                      "src": "@thumbnail.512x432"
                    },
                    "style": {
                      "height": "200px"
                    },
                    "filePreviewProps": {
                      "fileTypeIconClass": "sp-fileTypeIcon-cardDesigner",
                      "brandTypeIconClass": "sp-brandTypeIcon-cardDesigner"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!FileLeafRef.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-keyboard-focusable"
                },
                "txtContent": "[$FileLeafRef]",
                "defaultHoverField": "[$FileLeafRef]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              },			  
          {
    "elmType": "a",
    "txtContent": "Download",
    "attributes": {
      "class": "sp-card-defaultClickButton",
      "role": "presentation",
      "target": "_blank",
      "href": "=@currentWeb+'/_layouts/download.aspx?SourceUrl='+[$FileRef]"
    },
    "style": {
      "padding": "10px",
      "height": "32px",
      "margin-right": "8px",
      "margin-botton": "10px",
      "font-size": "14px",
      "border-radius": "2px",
      "border": "none",
      "font-weight": "600",
      "background-color": "#0078d4",
      "cursor": "pointer",
      "color": "white",
      "text-decoration": "none",
      "text-align": "center",
      "width": "65px"
    }
  }
            ]
          }
        ]
      }
    ]
  }
}

This looks like this

Best Regards,
Sven

[#7]

@SvenSieverding 

Thank you so much, Sven! I replaced my existing code with the code you provided and the button was clickable in the Gallery view. 

The only issue I'm running into now is selecting the Download button when accessing through Teams mobile app > Viva Connections app, the file does not download to the users mobile device. I'm not sure if this is a download functionality limitation or an expected behavior, since we have external sharing disabled at the tenant level. 

[#8]

Hi @KatherineS-Q ,

in that case you should also try to set hideselection to true (line 5).
This will disable the selection/default behavior completely.

Best Regards,
Sven

[#9]

@SvenSieverding  

I set hideselection to true, but still doesn't allow you to download when accessing from Teams mobile > Viva Connections app. 

It may be a limitation on mobile? 

Doesn't work on SharePoint mobile app either. 

It just opens the file in the in-app browser window. 

[#10]

@KatherineS-Q 

Yes, I think this is a limitation of JSON formatting on mobile apps. I have seen someone mentioning similar issue while using mobile app but I cannot find the link to that discussion/thread right now.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.