Custom SharePoint display template you can find interesting when you start playing more with branding. For the last few weeks, I was very busy at my new job and during this time I was doing a lot of stuff related to branding. Of course, I am not a designer, but still, I have learned a lot. Today I would like to write about the Custom SharePoint display template. It will be the third post related to branding (part 1 and part 2). I guess that many of you saw nice widgets which present upcoming events. Today I would like to show you how to build something like this as it’s not possible to do that with the default SharePoint configuration. At the begging let me write a few words of some basis.
Display template
is responsible for the format and style of search-related web parts, also it presents managed properties and how it will look like.
In fact, display template has two pieces:
Control Template – it’s place holder where results from search engines will be stored. Control template is rendered just one time.
Item Template – it’s responsible for single item display, for example, descriptions, images, title, etc. Each element is rendered separately. Today I will write about item template.
And just one thing. Content Query Web Part, which is very useful sometimes is not search based, which means that you can’t make modifications to related display templates… I lost some time to find out that.
Display template can be a part of a branding project, which can be built and stored in Design Package. It’s a full branding project, which contains all of the customizations. Ok, let’s come back to our Custom SharePoint display template. In the first step, we should display the design manager for our site collection.
Let me remind you that to do that we need active SharePoint Server Publishing feature in our site collection/site. When we display the content of our folder with display templates we will see a lot of files, which are responsible for displaying various data. Describing all those stuff will take to much time, but in general, idea is very similar. And I would like to change how Content Search presents a single element. Let’s search for a file that has a title: “Picture on left, 3 lines on the right”. This files is used when the Content Search web part present to us possible options for the Item. You can find more about all those files at Technet. Let’s select it and make just simple CTRL-C, CTRL-V with changing file name during copy process. Now it’s time for SharePoint designer. We are going to display all files and then we are going to: /_catalogs/masterpage/Display Templates/Content Web Parts/our_file_name. I would like to mention that when we make a copy of our file SharePoint also created additional file with js extension. We don’t touch it, we work with HTML.
The first step will be a modification of the title tag. Title will be used in web part configuration page. Now it’s time for the file itself, as understanding how it works could be a real challenge:
- our variables can be accessed with this entry _#=
- if we want to run JavaScript after our page has been rendered we use code just like below:
<!–#
AddPostRenderCallback(ctx, function() {
//our code
});
_#–>
And following code:
var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
var line3 = $getItemValue(ctx, "Line 3");
is responsible for values from web part configuration page (managed properties). Now it’s time for the code which display day number and first three letters of the month. The code should be at the end of the file:
<!–#_
}
var myDate = null;
myDate = new Date(line3);
var monthNames = [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”];
var myMonth = monthNames[myDate.getMonth()];
var myDay = myDate.getDate();
AddPostRenderCallback(ctx, function() {
document.getElementById(“monthBox”+line3Id).innerHTML = myMonth
document.getElementById(“dayBox”+line3Id).innerHTML = myDay;
});
_#–>
Let’s take a look at the tags where we placed the code. I spent some time to find valid format to make code running. Variable “line3” is third line from configuration page of the web part, and we store there our event date. Then we can use our calculated values in page code:
<div id=”CompanyDate” style=”float: left; width: 50px; height: 50px; text-align: center; margin: auto;font-weight: bold; font-size:14px”>
<span id=”monthBox_#= line3Id =#_” >month </span>
<br>
<span id=”dayBox_#= line3Id =#_” >day </span>
</div>
This HTML code above has been added to an existing one, just before the part responsible for image rendering. This ID entry can be strange, but in this way, we can create SPAN ID’s in an automatic way. Now we need just to publish our file. After that our title should be visible at a possible option for the item in the web part Content Search configuration page. Next time I will show how to configure the web part and search services to get the result. And that’s all.
