Create Tiles view on modern SharePoint list | Customize SharePoint List View | Using JSON Formatting
In this video, you will learn how to create a tiles view on the Moden SharePoint list.
Convert HTML to JSON: https://booden.net/ViewFormatting.aspx
Formatting Syntax: https://docs.microsoft.com/en-us/shar...
Validate JSON: https://jsonlint.com/
Tiles View JSON:
{
"$schema": "https://developer.microsoft.com/json-...",
"height": 250,
"width": 350,
"hideSelection": true,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "stretch",
"margin-bottom": "16px",
"min-width": "150px",
"flex-grow": "1",
"justify-content": "space-around",
"padding": "5px",
"position": "relative",
"border": "1px solid black"
},
"attributes": {
"id": "dv_parent"
},
"children": [
{
"elmType": "img",
"style": {
"width": "100%",
"height": "80%"
},
"attributes": {
"src": "[$ImgURL]",
"alt": "image"
}
},
{
"elmType": "a",
"style": {
"overflow": "hidden",
"border-radius": "2px",
"padding-left": "2px",
"padding-top": "16px",
"position": "absolute",
"top": "0%",
"left": "0%",
"width": "100%",
"max-width": "100%",
"background-color": "transparent",
"height": "100%"
},
"attributes": {
"href": "[$Playlist]",
"target": "_blank"
}
},
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"padding-left": "16px",
"padding-top": "16px",
"position": "absolute",
"top": "80%",
"left": "0%",
"color": "black",
"font-weight": "bold"
}
}
]
}
}
---------------------------------------------------------------------------------------------------------------------------
Follow me on Twitter to get Office 365 updates:
Twitter:
/ sagarsharma94
Gmail: [email protected]
Facebook:
Join the Facebook group to collaborate with SharePoint Community
/ 52910. .
---------------------------------------------------------------------------------------------------------------------------
Like, Share, and Subscribe to our channel for more informative and development-related videos. Much Love! Keep Learning! :)