Displaying Promoted Links on Multiple Lines

The promoted links app is a great way to display visual links to your SharePoint users. Out of the box they come with a few customisation options, allowing you to open links in new tabs, in a modal dialog or act as a normal link. They also let you chose a cust​om image, and provided the image is transparent, will always stay within the brand of your SharePoint site.

SharePoint Promoted Links List

When you start to add multiple links, the app will begin to paginate the tiles. This can be very handy in certain situations, where you want to display lots of tiles with very little screen real estate, however isn’t very flexible if you want to use this as the main feature of a page. Fortunately, customising this app to work on multiple lines is fairly simple.

SharePoint Promoted Links on Multiple Lines

Customising the Custom JS File

To display the tiles in the new way, you need to update the JSLink property of the Promoted Links web part. The following steps can be followed to achieve this.

Step 1: Download the Custom JS File

Firstly, you’ll need to upload the JavaScript. You can download the JavaScript from here​. It is important to upload the JavaScript file to the Site Collection Master Page gallery, in the Display Templates folder. It’s also important that you do not change the name of the file. This is due to how the file must be registered in SharePoint to work with Minimal Download Strategy.

  1. Go to the Settings (the cog) > Site Settings.
  2. Click “Master Pages”
  3. Click “Display Templates”
  4. Upload the file, ensuring it is called “MultilinePromotedLinks.js”

Download JavaScript

SharePoint Master Page Gallery

Once this is uploaded, if it’s not already added, add the Promoted Links app to you page. Next, edit the web part, and scroll to the “JSLink” property, under “Miscellaneous”. Set the JSLink property to “~sitecollection/_layouts/15/sp.init.js|~sitecollection/_catalogs/masterpage/display templates/MultilinePromotedLinks.js”.

Edit SharePoint Web Part

Edit the web part

Edit Web Part Properties

Set the JS Link Property

Step 3: Save and Done

Apply the changes to your web part, and save the changes.

If this all worked, your web part will now be on multiple lines.

SharePoint Promoted Links on Multiple Lines

Some things that may go wrong:

This is the most likely error. To fix this, edit the web part again, and ensure the JSLink property is pointing to the correct file, and it is prefixed with “~sitecollection” – check the table above if you’re not sure your link is correct.

Error: The view of the web part has changed

Again, this is fairly likely. For the rendering to work, the web part view must be “Tiles”. Edit the web part and make sure it hasn’t been changed.

Set List View Web Part View

Summary

This is a very simple change which adds another level of flexibility to the default web parts. The whole process should only take a couple of minutes, and gives you another way of using the tiles. If you’ve used this blog, I’d love to hear any comments or suggestions, so please leave a comment below, or drop me an email ross@rbradbrook.co.uk

Updated (10/11/2013)

Updated (08/03/2014)

Thanks to those who pointed out a bug with this template when used in publishing sites and helped me to work through a fix