Display Template and Current Item Index

A little while ago we had request where we were spouse to build a content lift up that displays the latest news pages. Very common and nothing new. The solution should be done with SharePoint OOTB features (be Office 365 compatible), so I decided to use a search and search web parts like I have done a multiple times before. What customer wanted was something like in this wireframe.

(Again here’s the link to source code used in this example: GitHub Mikko Koskinen)

The news post should be listed from newest to oldest. The most recent one should have a title, some text and image when others should show only title and short text from the news body. Because I wanted to keep things light from performance point of view I wanted to accomplish this with one web part only. You could do this with two separated web part for sure.

But if we think of the concept of search web part and display templates we know that we have two elements in template; a control display templates and item display templates. This concept is explained nice in Paul Matthews display template series where the following image can be found. If the concept of display templates and using them is new to you please read Matthews posts first.

Same item template is used to every single item that is returned to us from the index. If so how can we style the first item element differently than others?

After going through basically every single value from ctx.CurrentItem I finally found the answers. The detail I need is not in CurrentItme but in context it self. There is a value for current item id found and we can use that to solve our small problem.

Only thing we need to do is to check what is the idx value of the current item in display template and change the styling based on that.

var shortText = String.format('<div class="ms-noWrap newsBody" title="{0}" id="{1}" >{2}...</div>',
				$htmlEncode(line2.defaultValueRenderer(line2)), line2Id, line2.toString().substring(0,100));


var index = ctx.CurrentItemIdx;

if (index == 0){
_#-->
	<div class="mainNews" id="_#= containerId =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_">
			<div class="newsImage" id="_#= pictureContainerId =#_">
				<!--#_
				if(!linkURL.isEmpty)
				{
				_#-->
				<a href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
				<!--#_
				}
				_#-->
					_#= pictureMarkup =#_
				<!--#_
				if(!linkURL.isEmpty)
				{
				_#-->
				</a>
				<!--#_
				}
				_#-->
			</div>
			<div class="newsTitle" id="_#= dataContainerId =#_">
				<!--#_
				if(!linkURL.isEmpty)
				{
				_#-->
					<a href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">
				<!--#_
				}
				_#-->
					<h2 class="ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h2>
				<!--#_
				if(!linkURL.isEmpty)
				{
				_#-->
					</a>
				<!--#_
				}
				_#-->
			
				<div class="newsBody" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_" > _#= line2 =#_</div>
			</div>
		</div>
<!--#_	
}
else{
_#-->
	<div id="_#= containerId =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_">
			<div class="newsTitle" id="_#= dataContainerId =#_">
				<!--#_
				if(!linkURL.isEmpty)
				{
				_#-->
					<a href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">
				<!--#_
				}
				_#-->
					<h2 class="ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h2>
				<!--#_
				if(!linkURL.isEmpty)
				{
				_#-->
					</a>
				<!--#_
				}
				_#-->
			
				_#= shortText =#_
			</div>
		</div>
<!--#_	
}
_#-->

After this we can have nice one web part solution with OOTB tools to our problem. You can find the full source from my GitHub (link at the beginning the post).