Create Tile in SharePoint Online Step by Step

Today in this “Create Tile in SharePoint Online” article we’ll learn about how to create a Tile view in modern SharePoint online lists and configure it step by step.

SharePoint Online, a powerful collaboration platform by Microsoft, offers a variety of views to tailor your browsing experience. One such engaging and visually appealing view is the “Tiles View.” In this article, we’ll delve into the Tiles View feature in SharePoint Online, exploring its benefits and how it can enhance your productivity.

Key-Highlights: Create Tile in SharePoint Online

• Introduction
• How to enable tiles view – actual implementation.
• Use cases of tiles view.
• Summary – what do we have here?
• References

Introduction – Tiles in SharePoint (Create tile view in modern SharePoint online lists)

Recently (5th September 2019), Microsoft 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.

Understanding Tiles View

Tiles View is a display option within SharePoint Online that presents your content in an intuitive and visually appealing grid layout. Each item, whether it’s a document, a list item, or an image, is represented by a tile. These tiles showcase a preview or an icon, along with a title or a description, providing users with a quick overview of the content.

A Visual Feast for Enhanced Navigation

The beauty of Tiles View lies in its visual representation of data. Instead of a traditional list or detail view, where items are displayed in rows, Tiles View showcases content as vibrant, interactive tiles. This design is particularly effective for visual learners or those who prefer a more graphical approach to navigation.

Key Benefits of Tiles View

• Intuitive Navigation: The visual representation aids users in quickly identifying and accessing the content they need, enhancing the overall user experience.
• Efficient Scanning: The grid layout allows for efficient scanning of items, reducing the time it takes to find specific content.
• Engaging Interface: The use of images and previews in the tiles makes the interface engaging and encourages users to interact with the content.
• Customizable Display: Users can customize the tile layout to suit their preferences, providing a personalized browsing experience.

How to Access Tiles View

Accessing Tiles View is simple and can be done in a few easy steps:

• Navigate to Your Document Library or List: Access the SharePoint Online site and select the document library or list you want to view in Tiles.
• Switch to Tiles View: Look for the “Switch view” options, often represented by icons like a grid or tiles. Click on it and select “Tiles” to switch to the Tiles View.
• Customize the Display: Depending on your preferences, you can further customize the display by adjusting the size of the tiles or arranging them in different layouts.

How to Enable Tiles to View – actual implementation: Tiles in SharePoint (create tile view in modern SharePoint online lists)

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

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

Here we can see that the “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“.

 Then we’ll get the JSON box as below:

SharePoint view formatting JSON examples

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

Code Reference URL:  Tiles in SharePoint (create tile view in modern SharePoint online lists)

List-Formatting samples json

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

 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 layout of the tiles.

 Notes:

1. 1. For demo purposes I have displayed only the “Title” column however, we can display all types of columns except managed metadata(as of 5th September Microsoft announcement).
   2. In the code sample what I have shown here – can be extended to fit our requirements.
   3. 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 the below columns in the particular list:
   4. 3.1 Title – Single line of text 3.2 Icon –  Single line of text(Get the icon name from UI fabric site, see the References section) 3.3 URL – Hyperlink 3.4 NewTab – Yes/No

Use cases of tiles view (tiles in SharePoint)

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 a more responsive, dynamic, and modern way. For example, when we deal with a big list with multiple columns along with image types, we face a lot of challenges in displaying those items. Sometimes we need to scroll horizontally across the layout, and most of the image of the case does not display properly as it does not fit the default view layout. So now, using the “Tiles” view approach, we can overcome these issues.

Detailed Understanding – What is Tile in SharePoint Online?

In SharePoint Online, a “Tile” is a visual component used to display content in a grid-like format, making it easy for users to navigate and access various resources. Tiles are commonly used to create visually appealing dashboards, quick links, and other navigational elements on SharePoint pages.

Key Features of Tiles in SharePoint Online

1. Visual Appeal: Tiles offer a visually engaging way to present information, making it easier for users to find and access key content.
2. Customizability: Users can customize tiles with images, icons, and text to suit their needs and enhance usability.
3. Interactivity: Tiles can be configured to link to various SharePoint content such as documents, lists, libraries, pages, and external URLs.

Types of Tiles

1. Quick Links: These tiles allow users to quickly navigate to important content or resources within SharePoint or external websites. Quick Links can be customized with images, icons, and text.

2. Promoted Links: A special type of tile used to highlight specific links, documents, or pages. Promoted Links are often used on homepages or dashboard sites to draw attention to key resources.

3. Hero Web Part: This web part allows users to create a set of tiles that can highlight important content with large images and interactive elements. It is particularly useful for creating engaging and dynamic homepages.

Creating and Customizing Tiles

1. Using Quick Links:

   • Go to the page where you want to add the tiles.
   • Click on the “Edit” button to enter the page editing mode.
   • Add the “Quick Links” web part by selecting it from the web part gallery.
   • Customize each link by adding a title, image, and URL.

2. Using Promoted Links:

   • Create a new Promoted Links list from the “Site Contents” menu.
   • Add new items to the list, specifying the title, description, link URL, and image URL for each tile.
   • Add the Promoted Links web part to a page and configure it to display the list.

3. Using Hero Web Part:

   • Edit the page and add the “Hero” web part.
   • Choose the layout (e.g., one tile, two tiles, three tiles, etc.).
   • Customize each tile with images, titles, and links to the desired content.

Use Cases for Tiles in SharePoint Online

1. Intranet Homepages: Use tiles to create an engaging and user-friendly intranet homepage, providing quick access to important resources and news.
2. Dashboards: Build dashboards with tiles to display key performance indicators (KPIs), reports, and other critical information.
3. Navigation: Enhance site navigation by using tiles to link to frequently accessed documents, libraries, and subsites.

Best Practices

1. Consistency: Use a consistent design and layout for tiles across your SharePoint sites to create a cohesive user experience.
2. Relevance: Ensure that the content linked to by tiles is relevant and frequently accessed by users.
3. Visual Design: Use high-quality images and clear, descriptive text to make tiles visually appealing and informative.
4. Accessibility: Ensure that tiles are accessible to all users, including those with disabilities, by using appropriate alt text for images and ensuring keyboard navigability.

Summary – Tiles in SharePoint (create tile view in modern SharePoint online lists)

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

References: Tiles in SharePoint (create tile view in modern SharePoint online lists)

1. Use view formatting to customize SharePoint
2. Office UI Fabric Icons
3. Office UI Fabric Icon Tests
4. Fluent UI

See Also: SharePoint Online Tutorial

You may also like the below SharePoint Online tutorials:

• Office 365: Getting started with SharePoint PnP PowerShell – installation
• In 2 steps convert a classic SharePoint page to modern using PnP
• Office 365: Retrieve hub sites and associated sites using PnP Powershell
• Create a modern team site using PnP PowerShell in SharePoint
• In 4 steps access SharePoint online data using postman tool
• SharePoint admin center: Learn SharePoint online administration in an hour – step by step
• SharePoint REST API: GET vs POST vs PUT vs DELETE vs PATCH
• Office 365: Understanding the hub site in SharePoint online

About Post Author

Microsoft Techy

As a SharePoint and Power Platform Maven, my greatest joy comes from sharing my expertise with colleagues, friends, and the tech community, helping them navigate the ever-evolving world of technology and guiding them through the dynamic landscape of modern technology.

See author's posts