There are lots of examples of display templates out on the Internet, most are really fancy and clever which is great. However sometimes you just want something that is simple and presents your data in a clear manor that looks business like. So after weeks (it felt like weeks) looking for some simple instructions I decided that I’d write some and hopefully help fellow IT’ers out there looking to do the same.
I have a Wiki site that has a number of pages, all pages have Wiki categories associated to them. I want to use a Content Search web part (CSWP) to present pages that are a member of a particular category onto a single page. This way users can go straight to these “landing” pages and see data laid out in a clean format with out having to open wiki pages individually.
First off we need a blank page, this will be the landing page that holds the content search web part that’ll display the results.
In here we need to insert a Content Search web part into the page (found under Content Rollup within the Web part gallery)
You’re now greeted with this lovely looking thing….Yuk!
That has to go…you can save this page for now, we’ll come back in a mo.
First off we need a copy of the 2 lines display template that is within SharePoint, to get this go to “Site Settings” -> “Master pages and page layouts“. Open the “Display Templates” folder and the “Content Web Parts” folder. Now this bit is a lot easier if you are using Internet Explorer, if you are just click on “Open with Explorer” from the ribbon (library view).
You should have a nice Windows Explorer view of your “Content Web Parts” folder. From here find the file called “Item_TwoLines.html” and copy it to a new file called “Item_ThreeLines_Custom.html”
Cool, now you will have noticed that I’ve added a line in the name of the file, this is because I want more property boxes available to me to in my template. If you don’t, then just copy the file and append the “_custom” on the end so you know it’s not a standard template.
Ok, now we need to edit this newly created file. So open it up with your favourite editor.
First thing to do is change the title of the template, I’ve called mine “Three Lines Custom” this is the name you’ll see in SharePoint when editing the web part.
Now I want to add that additional line. This is pretty straight forward to do, for simplicity I’ve highlighted the bits I’ve added in the script below. These edits start from the top of the file and in most cases is a simple copy from the “line2” text around it and paste/edit by replacing the 2 with a 3
Note that you don’t need to change the class tag on this one, just change the highlighted parts
Now save the file.
Pop back the SharePoint page where you inserted the web part, edit the page and then open the web part properties.
Click on “Item” under the “Display Templates” heading and you’ll see your nice new template
Now click on “Property Mappings” and select “Change the mapping of the managed properties……”
Hopefully if all has gone to plan you’ll see four elements (Link URL, Line1, Line2 and Line3”
You can set these properties as you wish, but as we are going to be showing the Wiki pages here I am changing the Line 2 to “PublishingPageContentOWSHTML” and Line 3 to “CreatedBy”
On clicking “Ok” you’ll see the web part light up with the wiki pages it has found…woohoo!
However, you’ll also notice that the HTML doesn’t really fit in the screen very well so we’ll need to fix that. Go back to our template file and edit it again. Within the Line2 section remove the “ms-noWrap” from the DIV Class and save the file.
Refresh the SharePoint page and hopefully now the text is wrapping nicely.
So already the template is starting to look quite good but now is the time to customise!!
First off I want limit the results on this page to just items within the “SharePoint” category and I want them to be sorted from newest first. To do this we need to open up the web part properties again.
This time click on “Change Query”
When the query window appears click on “Switch to advanced mode”
The query test window will already be populated with some information, note the URL is targeting just the this site. If you wanted to target other sites within SharePoint this query can be changed to do that. However for now I am concentrating on this site. I need to add a property filter to search for the word “SharePoint” within the categories (which are terms within the Metadata store).
Just go to the “Property filter” box and select “owstaxidmetadataalltagsinfo” and set a manual value of “SharePoint”, then click “Add property filter” and it’ll add it to the query at the bottom of the page.
To ensure that your new query works click “Test query” and you’ll see the results in the right hand window.
Now click on “Sorting” tab and change the “Sort by” to “Created” and the order to “Descending” and finally click “OK”
Click “OK” on the web part properties and you should see the web part update.
Right, there are a couple of things I don’t like about the template, one is size of the title text and the other is that horrible icon.
So let’s get that changed.
We need a CSS style sheet, this needs to be created in the sites “Style library” on the site. Remember the style library only appears in the top level publishing site so if you are in a sub site within a publishing parent site you’ll need to go up a level. For cleanliness I create a folder called “customcss” and then place my CSS file in there. In this example the CSS file is called “DisplayTemplate.css”
I need to overwrite SharePoint’s default CSS with my own, as you can see I have identified the class for the header and I’ve changed the font size, I’ve also stamped it “Important” so it will override. I’ve also made the font bold.
The CSS file is created but how do I reference it? Easy…..open that display template file again and find the <scripts> tag.
Enter the following line.
$includeCSS(this.url, “~sitecollection/Style Library/CustomCSS/DisplayTemplate.css”);
Save it and see if it works.
Much better…but that pesky icon is still there.
Back to the template file and you need to comment out a bit of the code, like so….
Next step…..lets add some pizazz to these pages to make the pop from the screen!
First let’s wrap them up in a DIV so we can add some customisation, to save some time I’ve also created a class within the CSS file as follows:
border-radius: 2px 2px 2px 2px;
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
This bit of code will wrap the page up in a box with radius corners and add a shadow to make it “pop” from the screen.
Now we need to add the class and DIV to the display template, so open the display template file up and add the opening DIV line at the top of the HTML.
And don’t forget to close the DIV at the bottom of the HTML
Save and go test it.
Check that out!
Right the last bit of bling, I want to add an image where that nasty icon once sat, to do this I am going to insert a table (single row, two column) into the display template then place the image in the left column and the search result in the right.
Remember this all simple HTML so you can customise how you want.
First off lets add some classes to the CSS file:
vertical-align: top !important;
text-align: left !important;
The first ensures that the image is placed at the top left of the column, the second makes sure the table is the full width of the DIV.
Ok, once you’ve updated the CSS file we need to edit the display template and insert the table properties and add a source location for the image.
Save the files and test it…
How cool is that! And if you have more than one page it will stack it like so….
Remember!! before you introduce this to your users remember to check in the CSS file and also publish the HTML display template file to a major version.
So that is a brief demo of what can be achieved using Content Search Web Parts (CSWP) using just a bit of HTML. Now you have your template file and CSS file you can tweak the look and feel of the pages very easily.
A couple of styling hints.
If you want to hide the “Last Modified” tag line on the pages just add the following to the CSS file
Or if you want to make the web part larger (by default it’s set to 633px) just add the following to the CSS file