How to Create a Tiles View using SharePoint Online modern list view customization

In this SharePoint Online customization tutorial, how to create a tiles view using SharePoint Online modern list view customization using JSON.

As we know in the year 2016, SharePoint online team released Modern List and Library experience in both SharePoint On-Premise and SharePoint Online. So now a day business recommends this feature for more benefits.

SO here I am not using ant JSLink to customize our modern list rather than, I am going forward to use JSON for an excellent user interface.

If we go in detail, there are many good features added in both modern lists and libraries but here I am using those called List View Customization.

Create a Tiles View using SharePoint Online modern list view customization

Step 1: I have created a SharePoint List called Patients List and it contains the following column name which you can see in the list.

Create a Tiles View using SharePoint Online modern list view customization

Step 2: Next you can see there is a new field called Tiles, its visible in the screenshot. So we have to add the below code to implement this.

SharePoint Online modern list view customization using JSON

Step 3: Next copy the below code and paste it inside code editor and click on Save.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "tileProps": {
    "hideSelection": true,
    "width": "1800",
    "height": "70",
    "formatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-themeLighterAlt ms-bgColor-red--hover ms-fontColor-blue--hover"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "min-width": "120px",
            "min-height": "140px",
            "margin-right": "15px",
            "margin-top": "17px",
            "box-shadow": "14px 16px 19px white"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "center",
                "margin": "auto"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "sp-row-title "
                  },
                  "txtContent": "[$Title]"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Step 4: Once I click on the Save button, the SharePoint List view got changed to different views which same as the below screenshot.

Create a Tiles View using SharePoint Online modern list

This is all about customization of List View in SharePoint modern list.

You may like following SharePoint tutorials:

Reference: for theme color change and generate the JSON format, you can follow the below URL

In this tutorial, we learned how to Create a Tiles View using SharePoint Online modern list view customization using JSON.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>