How I can get the entire tile to link to the page instead of the list?

Question

Hi, I have a home page where I have a banner across the top and a web part with tiles right underneath.

The tiles are formed from a list that I created.

I want each tile to go to it's own page when clicked on anywhere on the tile.

However, when I click on the image, it takes me to the list page:

I have given the list a link column and this appears as a link on the tile but this is not user friendly as most people will just click on the picture or another part of the tile.

Any ideas of how I can get the entire tile to link to the end page? Thank you in advance.

Answer 1

Hi @Ewanski Patricia A,

Thank you for posting in this community.

I'm sorry to say that since the action after each item in the List web part is clicked on is fixed, that is to open the list where the item is located.

But in your case, I suggest you to use Classic Promoted Links App, which is similar to List but he has a column called Link Location. When we click on the item, it will jump to the filled link location. And it defaults to the Tiles view.

Step 1: Create a classic promoted links App

• Go to your modern SharePoint Online site and navigate to the “Site Contents” page.
• Click on “+ New” and select “App” to create a new app.
• Select “Classic experience” link, Search for and select the “Promoted Links” app, then give it a name and click “Create”.

Step 2: Populate the promoted links list with relevant links, images, and URL

We need images to display on the tiles. So, upload relevant images to your site. You can use any existing library, such as “Site Assets” or “Style Library”, or create a new one. SharePoint promoted links tile size? Ideally, 256×256 pixels! Once uploaded, proceed to create entries in the promoted links list we created in Step 1.

• Open the newly created “Promoted Links” list.
• Click on “+ New” to add a new promoted link.
• Fill out the required fields:
  • Title: The title of the promoted link
  • Background Image Location: The URL of the image you want to use for the tile
  • Description: A brief description of the link
  • Link Location: The URL the tile will link to
  • Launch Behavior: How the link should open (e.g., in the current page, in a new tab)
  • Order: The order in which the tiles should be displayed
  • Click “Save” to add the new promoted link.
  • Repeat the above steps to add more promoted links to the list.

Step 3: Edit the modern SharePoint Online page and add a list web part

• Navigate to the modern page where you want to display the promoted links.
• Click “Edit” to enter edit mode.
• Click the “+” icon to add a new web part, then search for and select the “List” web part.

Step 4: Select the promoted link list created and configure the properties.

• The system will display all the lists on your site. Select the “Promoted Links” list you created earlier.
• The promoted links will be shown as a list of tiles on the page, resembling the classic promoted links experience. You can configure the layout and appearance of the links using options like compact, filmstrip, grid, button, list, and tiles. Hide the command bar and See all buttons.
  • Click “Publish” to save the changes and make the promoted links visible on the page.

That’s all! The promoted links will now be displayed on the SharePoint Online page, allowing users to quickly access the specified URLs or resources.

In addition, it is possible to add your customized columns in the List setting just like any other list.

If you are not satisfied with the current view, you can use SharePoint JSON Formatting to customize the tiles view.

Reference: SharePoint Online: How to Add Promoted Links to Modern Page?

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link. 

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.