SharePoint Office 365 List Tile View

SharePoint Office 365 List formatting with Tile view 

Products can be shown in following nice way. 

Step 1: Create List with following 4 columns 

Title : Single Line Text

Location: Single Line Text

ProductPhoto : HyperLink 

ProjectURL : HyperLink ,

Step 2 : Upload Proper data 

Step 3 :  GO to All Items in List and click on Format current view as shown in following 

, 

Step 4:  select Advance mode  as shown in following picture 

Step 5:  Copy following code in Text Editor and save it. 

Step 6:  Select Tile and save as view as showing in following picture. 

Source Code : 

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",

"height": "450",

"width": "300",

"formatter": {

"elmType": "div",

"style": {

"display": "flex",

"align-items": "stretch",

"margin-bottom": "16px",

"min-width": "150px",

"flex-grow": "1",

"justify-content": "space-around",

"padding": "8px",

"color": "#333333"

},

"children": [

{

"elmType": "div",

"style": {

"width": "95%",

"height": "98%",

"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",

"overflow": "hidden",

"border-radius": "2px"

},

"attributes": {

"class": "ms-bgColor-neutralLighterAlt"

},

"children": [

{

"elmType": "div",

"style": {

"display": "inline-block",

"min-width": "250px",

"text-align": "center",

"margin-top": "50px"

},

"children": [

{

"elmType": "img",

"attributes": {

"src": "=if([$ProductPhoto] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$ProductPhoto])",

"title": "=if([$ProductPhoto] == '', 'No picture available', [$Picture.desc])"

},

"style": {

"width": "85%",

"height": "200px"

}

}

]

},

{

"elmType": "div",

"style": {

"display": "inline-block",

"min-width": "250px",

"vertical-align": "top",

"padding-top": "16px",

"text-align": "center"

},

"children": [

{

"elmType": "div",

"style": {

"margin-bottom": "15px",

"font-size": "20px",

"font-weight": "600"

},

"txtContent": "[$Title]"

},

{

"elmType": "div",

"style": {

"font-size": "14px",

"margin-bottom": "20px",

"text-align": "center"

},

"txtContent": {

"operator": "+",

"operands": [

"",

"[$Location]"

]

}

},

{

"elmType": "a",

"style": {

"text-decoration": "none"

},

"attributes": {

"href": "[$ProjectURL]",

"target": "_blank"

},

"children": [

{

"elmType": "div",

"style": {

"font-size": "14px",

"margin-top": "15px",

"height": "30px",

"text-align": "center",

"width": "144px",

"vertical-align": "middle",

"display": "inline-block",

"color": "#444",

"border": "2px solid #CCC",

"background": "#DDD",

"box-shadow": "0 0 5px -1px rgba(0,0,0,0.2)",

"cursor": "pointer",

"max-width": "100px",

"padding": "6px 10px 0px 10px"

},

"attributes": {

"target": "_blank",

"class": "ms-bgColor-white--hover"

},

"txtContent": "View Project"

}

]

}

]

}

]

}

]

}

}

Output