2014-08-26

Customers keep asking for dynamic content to be displayed as ’tiles’. The Promoted Links View is only available for static lists, and the Tile Display Template for CSWP is missing. So; I created it!

Normally, I would attack this problem with special styling on SharePoint, however, for the first time I’m using SharePoint styling on a custom element. And it works! There’s only three lines CSS styling to make this display template look like tiles, the rest is taken care of my copying the HTML structure and CSS classes SharePoint need to create the promoted links tiles view and use it for the display template. And this is how it’s done:

Below is a screenshot of the custom tile display template used by a CSWP to get my projects:

Below is a screenshot of the tiles view of a promoted links list containing three projects:

Not that big of a difference, right? Well, it’s because the HTML structure and the CSS classes are the same, tricking Sharepoint to style out custom tiles for us!

To accomplish this you need to create a new display template, a new list template and add three lines of CSS to your custom CSS file. Let’s get to work!

New display template: “Tiles.html”

I create a new display template by copy+paste an existing display template similar to the one I need. I used the “Item_LargePicture.html” this time. You just need to copy and paste the .html-file, check it out and check it back in again, and the system creates the .js-file for you (we never tough this, but we need it all the same).

Rename the new display template and open it in advanced mode. Edit the title tag and the description tag to fit your needs; this is visible to the user when selecting a display template from the CSWP in the UI. I blank out the Managed Property Mappings, and save the display template.

Select this new display template in a CSWP to connect the right data fields to the managed properties. I find this the easiest way to connect managed properties because I see what data i get immediately. When I’m happy with my selection of fields and the data they output I copy the right field names to my display template code.

Below the code connecting the dotts in the display template I add code for cutting the project description field data at 45 characters so that the description text doesn’t overflow the tile.

The biggest effort with this display template was getting the HTML structure right with all the necessary classes right so that SharePoint would style my custom tiles automatically. I used the Developer Tool (F12) in IE to get the HTML structure overview, and manually copied it over to the HTML part of the display template. To be hones I’m not sure what all the attributes are, but as long as they didn’t trash my code I kept them.

Below is a screenshot of the HTML structure of one tile by the tiles view of a promoted links list.

This is the HTML structure i created for the display template:

It’s the same basic structure and the same classes. Note the code for printing the extract of the description text.

New List Template: “Control_Tiles_List.html”

We have control of the tile itself, but we also need a way to control how these tiles relate to eachother. That’s where the list template comes in. And, it’s also where best practice dictates that we put the jQuery for the mouse over effect. So, like before we copy an existing template to create out custom list template. I use the “Control_List” this time. First of all I rename it and check it out and in to create the .js file. Then I edit the title and description in the head tag of the list template. I also need to include a reference to the jQuery library like this:

I edit the js code that create the code around each tile to match the structure of the promoted links tiles view:

At the bottom of the js code I add the mouse over effect, and then I change the class name of the wrapping div to “AllTiles” so that I can identify it in my jQuery code easier.

Three lines of CSS

This is all the CSS you need in your custom CSS file to make this work:

This looks like a big task, but it’s really not. All you need to do is create a new display template and a new list template, and add three lines of code to your CSS. The secret is using the same HTML structure and the same styling classes that SharePoint already use for the original tiles; what could be easier? If you follow these steps you’ll be able to display all kinds of dynamic content like tiles. This is a frequent request by out costumers these days, and it’s already implemented at a few project portals. Creating and customizing display templates is the most joyous work I’m doing with SharePoint these days. It brings the same powerful sensation that ItemStyle.xsl did in SharePoint 2010. I hope you figure out how to utilize display templates to meet your need, and if you do something cool with these tiles then let me know by adding a comment to this post. Good luck, and good Sharepointing.. 🙂

About the author 

Ulrikke Akerbæk