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.

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.

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.

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

You may like following SharePoint tutorials:

• How to display SharePoint list items in a table using SPFX
• Redirect to a different page after adding new list items in SharePoint
• Show SharePoint List Data using jQuery Datatable
• SharePoint Online modern list column formatting using JSON
• SharePoint Online modern list properties web part
• Display SharePoint list data in HTML table using JavaScript
• How to remove SharePoint Online Modern Page Title using PowerShell

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

• https://sharepoint-json-formatter.herokuapp.com/
• https://docs.microsoft.com/en-us/sharepoint/dev/design/themes-colors
• https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
• https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting

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