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:

  1. Navigate to your list
  2. On the right side of the command bar click on All Items and then Format this View
  3. 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]"
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
    
  4. 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 the person to which the car is assigned to.

The template was added to my PnP Site Template where all the list formatting templates built by the community are available and is also available in this post a single template that you can add to your site.

To apply it on your own environment, do the following:

Note: To get the template installed it’s required to have the PnP PowerShell installed on your machine. You can get the latest version from here.
  1. Download and extract the template from here
  2. Edit the variables at the top of the file
    • $siteURL – is the url to the communication site where the template will be applied
    • $user – must be an email from a user that exists in the communication site, this is used by the views that format the Person
    • column

  3. Save the file
  4. Right click on it and choose Run with PowerShell
  5. Introduce your credentials and click OK
  6. Once the template is executed you can open the Car Fleet list and select the Tiles view to see how the list data can be transformed into something modern and appealing.

If you have suggestions for other templates fell free to reach out by email or in the comment section.

Download Template

Car vector created by freepik – www.freepik.com


16 Responses to “How to create a Tile view on modern SharePoint lists”

  1. Sam

    September 11, 2019

    This is awesome!

    Reply
  2. Steve Morley

    September 12, 2019

    It’s very nice.
    I do notice two things.

    When I remove the JSON, it wipes out my view so I don’t see any items.

    When I click on “BMW” in your example, nothing happens. Shouldn’t it edit the item?

    Reply
    • João Ferreira

      September 12, 2019

      Hi Steve,

      Thanks for your feedback.
      If you remove the JSON SharePoint will automatically remove the Tiles view and you will end with a blank page until you select the list view or refresh your page.
      When you click on the car item it should open the detailed view of the item but not in edit mode, if you copy the link of the tile it should look like this.
      https://handsonsp.sharepoint.com/sites/ListFormattingSamples/Lists/Car%20Fleet/DispForm.aspx?ID=1

      Does the link has a different format on your site?

      Reply
      • Steve Morley

        September 12, 2019

        Nothing actually pops up.

        Down at the bottom left of the screen I get a “javascript;:” message with nothing after it. Both in Chrome and FireFox.

        Reply
        • João Ferreira

          September 12, 2019

          Steve, do you know if there is any other solution installed on the site intercepting the links?
          Are viewing the formatting directly on the list or inside the list web part?
          Below is an image of how it looks on my both tenants.

          Reply
          • Steve Morley

            September 12, 2019

            Definitely in the list itself and not looking at the web part from the front page.

          • João Ferreira

            September 12, 2019

            Not sure what might be causing the issue but I’ll try to reproduce it on a new tenant. Tanks for the feedback once again Steve.
            Have a nice day.

  3. […] How to create a Tile view on modern SharePoint lists – Joao Ferreira (BindTuning) […]

    Reply
  4. […] How to create a Tile view on modern SharePoint lists […]

    Reply
  5. Peter

    April 10, 2020

    I have successfully installed the template.

    Reply
  6. João Ferreira

    May 26, 2020

    Hi Ana,

    Yes it’s possible to do it, you can find the instructions here.

    Have a nice day 🙂

    Reply
  7. Sarthak Agrawal

    November 5, 2020

    Is there a way we can make this selectable, so that we can use dynamic filtering when we use it as a web part on a page ?

    Reply
    • João Ferreira

      November 17, 2020

      Hi Sarthak,

      Yes there is a way of doing it, all you have to do is change the

      "hideSelection": true

      to

      "hideSelection": false

      in the JSON.
      Then using the Lists web part you need to configure the filtering and connect the columns in both lists, the end result will be something like this animation.
      SharePoint Filter webpart

      Reply
      • Laura Mathis

        January 30, 2021

        I would love to do the dynamic filtering shown here. Can you share the how you did the filtering? I am having a hard time figuring that part out. I got my list loaded and the list properties loaded but can’t get the filtering right to show like yours.

        Thanks so much, your site is awesome!

        Reply

Leave a Reply


I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: