Microsoft 365 and Office | SharePoint | Development
The process of building custom applications and tools that interact with Microsoft SharePoint, including SharePoint Online in Microsoft 365.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 100,
"width": 65,
"hideSelection": true,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start"
},
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "button",
"style": {
"z-index": "1"
},
"attributes": {
"class": "sp-card-defaultClickButton",
"role": "presentation"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"position": "relative"
},
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute",
"bottom": "0",
"right": "0",
"z-index": "1",
"overflow": "hidden",
"cursor": "pointer",
"display": "flex",
"align-items": "center",
"width": "100%",
"background-color": "rgba(0,0,0,0.2)"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "img",
"style": {
"imageContainer": "[$CoverPage]"
},
"attributes": {
"class": "sp-card-imageContainer"
},
"children": [
{
"elmType": "filepreview",
"attributes": {
"src": "@thumbnail.512x432"
},
"style": {
"height": "100px",
"width": "100px",
"margin": "-23px 0px 0px -15px"
},
"filePreviewProps": {
"brandTypeIconStyle": {
"display": "none"
},
"fileTypeIconStyle": {
"display": "none"
}
}
}
]
}
]
}
]
}
]
}
}
this is the JSON code i write so what will i add in this so it will look like this