Brass Contributor

Sep 11, 2023

Solved

Clickable Button on Gallery View Document Library

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.

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

ganeshsanap
MVP
Sep 12, 2023
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.
- KatherineS-Q
  Brass Contributor
  Sep 12, 2023
  ganeshsanap
  Thank you for your response ganeshsanap! Adding the button in the List view works perfectly, but it doesn't work in Gallery view.

SvenSieverding

Bronze Contributor

Sep 12, 2023

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

KatherineS-Q

Brass Contributor

Sep 12, 2023

SvenSieverding

Thank you for your response! Two questions:

Does this work with the Gallery view?
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.

SvenSieverding

Bronze Contributor

Sep 12, 2023

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

Forum Discussion

Clickable Button on Gallery View Document Library

Share

Resources