Share via

SharePoint Online: Enable "Tiles" view in modern SharePoint online list

  • Article

Today in this article we will learn about how we can enable the "Tiles" view in modern SharePoint online list.

Introduction

Recently (5th September 2019), Microsoft has announced that now we can have the "Tiles "view in the modern SharePoint online list and the release has been deployed to all tenants across the globe.

 

How to enable tiles view - actual implementation

Before we head on to this we must verify that we have some dummy data in the list. So in the below we have sample list named as "Purchase Order" with some dummy data. 

 

Verify that Tiles View is not available by default in the list.

Here we can see that “Tiles” view is not available under the view drop down list.

 

In the next step, we’ll see how we can see the “Tiles” view option in the above list view drop down list. From the view drop down list – click on the “Format current view”.

↑ Return to Top

Then we’ll get the JSON box as like below:

 

 

Copy the below code and paste this into the JSON box mentioned over here.

{
"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": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-black 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 black"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
},
"rowFormatter": {
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-blue ms-bgColor-themePrimary--hover ms-fontColor-black--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px black"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
}

The above reference code can be found from here.

After copying and pasting the code – click on "Save" button.

↑ Return to Top
       

Now, go to the same list view drop down list – and we can see now “Tiles” view in the menu. If we click on the “Tiles” view we can see the list item in the tiles layout.

 

Notes:

  • For demo purpose I have displayed only the “Title” column however, we can display all types of column except managed metadata(as of 5th September Microsoft announcement).
  • In the code sample what I have shown here – can be extended to fit our requirement.
  • As we know that in modern SharePoint online – we don’t have promoted link web part, using this same JSON we can implement the promoted link web part. To do that, just we need to have below columns in the particular list:

Column Table:

 Column Name   Column Type  Remarks 
 Title  Single line of text   
 Icon  Single line of text Get the icon name from UI fabric site, see the References section
 URL  Hyperlink  
 NewTab Yes/No  

Use cases of "Tiles" view

As per me, this is an awesome feature added to the modern SharePoint list – and it gives us the flexibility to display the SharePoint list item content in more responsive, dynamic and modern way. For an example, when we deal with big list with multiple columns along with image types, we face lot of challenges to display those items. Sometimes we need to scroll over horizontally across the layout  and most of the cases image does display properly as it does not fit to the default view layout. So now, using the “Tiles” view approach we can overcome these issues.

Summary – What we had here?

Thus, in this tutorial we have learned that how we can enable the “Tiles” view in the SharePoint modern list and its possible use cases.

References

See Also

↑ Return to Top