How to create a Tile view on modern SharePoint lists

Modern SharePoint lists just received the option to include a Tile view to display data on a modern and good-looking layout. The Tile view is available on document libraries for a long time but the one released for lists is a bit different. While on libraries the layout is pre built by Microsoft on the lists you will have to build your own using the list view formatting feature. If you are new to the list View Formatting, I strongly recommend you start by reading the official documentation here and here to get familiar with the JSON schema. To add the Tile view to your list you will need to build your own JSON file, the easiest way to do this is start by using one of the available templates and modify it according to your needs. To simply add the Tiles View option to one of your lists do the following: Navigate to your list On the right side of the command bar click on All Items and then Format this View Paste the sample below and click Save { "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideColumnHeader": "true", "hideSelection": true, "tileProps": { "hideSelection": true, "width": "180", "height": "150", "formatter": { "elmType": "div", "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary–hover ms-fontColor-white–hover" }, "style": { "display": "flex", "flex-wrap": "wrap", "min-width": "180px", "min-height": "150px", "margin-right": "10px", "margin-top": "10px", "box-shadow": "2px 2px 4px darkgrey" }, "children": [ { "elmType": "div", "style": { "text-align": "center", "margin": "auto" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-row-title " }, "txtContent": "[$Title]" } ] } ] } ] } } } This example makes the Tiles option available and show the Title of your list as a tile If you have used the list view formatting before you should be familiar with the property rowFormatter that is used to format the List and Compact list views. To create the Tiles view your JSON definition is added inside the property tileProps. Manage your car fleet sample To test this new feature, I’ve built a demo list to manage a company car fleet to show each car and … Continue reading How to create a Tile view on modern SharePoint lists