Forum Discussion
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, ...
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 thisBest Regards,
Sven
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
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.
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 thisBest Regards,
SvenThank 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.
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