Welcome back to Part 3 of the SharePoint News Slider Post. Today we are going to talk about display templates. The first thing you will need to do is select the style of slider you would like to use. For today’s slider I am going with an all CSS style slider. This particular one was a code pen created by JFarrow.

In SharePoint 2013 we can style our results to look like something completely different. There are two display templates used in a SharePoint Search Result. The first is the Control Template. This template is the part of the design that is only used once. It is a container for the repeatable search results. It’s also where you will refer your custom CSS for the slider.

So our control template is actually fairly simple. First we are going to grab one of the default control templates in the gallery. To get to the gallery you will go to Site Settings. Then under Web Designer Galleries select the Master Page Gallery. There will be a folder called Display Templates, and then we need to go a little further down the rabbit hole to the search folder. The default naming scheme of the files is type_name.html. So we are going to use the Control_Blank.html control template as our base. We will then open the file in our favorite text editor. First change the name of the template in the Title. Add a script section with this line of code to add our custom css file to the template.

<script>

$includeCSS(this.url, “~sitecollection/style library/css/slider.css”);

</script>

With our css added to the template we need to add an additional div inside the div in the body.

Then add an accordion class to that div. Inside that div we will need an unordered list. Finally we will need to insert the logic for our item display templates to load. The code for that is:

_#= ctx.Renderitems(ctx) =#_

Your code should then look similar to this.

<script>

$includeCSS(this.url, “~sitecollection/style library/css/slider.css”);

</script>

<div>

<div class=”accordion”>

<ul> _#= ctx.RenderItems(ctx) =#_</ul>

</div>

</div>

The second display template is the Item template. This template will control how our search results will be displayed. This is the part that will repeat for every search result.

We will start with the Item_Default.html. You can get this display template in the same location as the last one. Once you have the template take out everything in the div with the id of Item_Default. Change the name of the template in the Title. Then add the following code:

<li>

<div class=”caption”>_#= ctx.CurrentItem.Title</div>

</li>

This adds a caption to our accordion slider. To add more fields from our list we will simply add another div and inside put the _#=ctx.CurrentItem.{ManagedProperty} . Simply replace where I have the managed property with the one we created in the earlier post.

Once you have finished building out your item template just save them as a different name. Then upload them to the same location in the master page gallery.

Back on the page that you have placed the search result panel on, edit the page, then edit the search result webpart. Under the Display Templates select our custom Control. Then select our custom Item template. Hit Apply and then Ok. Save the page and our SharePoint News Slider should now be working.

final-slider

 


Leave a Reply

Your email address will not be published. Required fields are marked *