Category: Sharepoint Search

Customizing SharePoint 2013 Search Display Template

In this post we’ll see how to configure SharePoint 2013 Search Display Template. Here we’ll add “Rating” column to the Search results.

As of now we have a document library “DocumentSearchLibrary” with some pptx files and rating.

When we use SharePoint search

We get out of box results in given format

To configure search results to display “Rating” column

Go to, Site settings -> Master Pages (or Master pages and page layouts) -> Display Templates -> Search.

Here we’ll be editing display template just for PowerPoint files, so Download a Copy of “Item_PowerPoint.html” and rename it to “Item_PowerPoint_Modified.html”.

Note: If you are not able to see HTML files and only .js files are visible, in that case you have to enable Publishing feature at site collection level. To enable that see the blogpost here.


Now open “Item_PowerPoint_Modified.html” in Visual Studio or Editor of your choice.

Change the Title from “PowerPoint Item” to “PowerPoint Item Modified”.

Find Property named “ManagedPropertyMapping” and ‘AverageRating’:’AverageRating’ at end of it. We are adding Average Rating because Rating column is Mapped with name AverageRating in Search Schema.



In end Add “ctx.CurrentItem.AverageRating“, this will show numeric value of rating.

Upload this file to Search Display Template folder.

Now go to Site Settings -> Result Types and Create a Copy of “Microsoft PowerPoint” and Rename it to “Microsoft PowerPoint Modified”.

Select “PowerPoint Item Modified” in “What Should these results look like?”

Note: Indexing Rating Column in SharePoint online can take a long time

Notice here that the Value is in text format but the desired result needs to have stars in the rating.

For displaying stars we’ll need to write custom code.

Star.js

$.fn.stars = function () {

return $(this).each(function () {


// Get the value


var val = parseFloat($(this).html());


// Make sure that the value is in 0 – 5 range, multiply to get width


var size = Math.max(0, (Math.min(5, val))) * 16;


// Create stars holder


var $span = $().width(size);


// Replace the numerical value with stars

$(this).html($span);

});

}

$(function () {

$(‘span.stars’).stars();

$(‘span.stars’).toggle();

});

Star.css

span.stars, span.stars
span {

display: block;


background: url(stars.png)
0
-16px
repeat-x;


width: 80px;


height: 16px;

}

span.stars
span {


background-position: 0
0;

}

Stars.png

Upload these files in desired folder and modify the code accordingly. (For sake of demo I just uploaded in Search folder under display template.

Now add this script tag just below body of “Item_Powerpoint_Modified.htm”

<script>
$includeScript(this.url, “https://*****/teams/*****/_catalogs/masterpage/display templates/search/Star.css”);

$includeScript(this.url, “https://******/teams/*****/_catalogs/masterpage/display templates/search/Star.js”);


</script>

Add following code at end of Item_Powerpoint_Modified.htm


<div>_#= $htmlEncode(ctx.CurrentItem.Author) =#_ <span
class=”stars”
style=”display:none;“>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</span></div>

<div>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</div>


Save the file, Upload it to Master Pages – > Display Template ->Search

Now go and check the search page J.


PS: For more info on Rating Control refer to http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css .

Thanks to Tatu Ulmanen without whose help this post would have been incomplete.

More PS : 1. Make Sure Crawl Property of AverageRating is set. For that go to Site Settings -> Search Schema -> Search for AverageRating.

Open AverageRating Managed Property and Add Mapped crawl propert as ows_AverageRating if its not there.


It may take some time before Sharepoint crawls it and it is indexed for search.

Customizing SharePoint 2013 Search Display Template

In this post we’ll see how to configure SharePoint 2013 Search Display Template. Here we’ll add “Rating” column to the Search results.

As of now we have a document library “DocumentSearchLibrary” with some pptx files and rating.

When we use SharePoint search

We get out of box results in given format

To configure search results to display “Rating” column

Go to, Site settings -> Master Pages (or Master pages and page layouts) -> Display Templates -> Search.

Here we’ll be editing display template just for PowerPoint files, so Download a Copy of “Item_PowerPoint.html” and rename it to “Item_PowerPoint_Modified.html”.

Note: If you are not able to see HTML files and only .js files are visible, in that case you have to enable Publishing feature at site collection level. To enable that see the blogpost here.


Now open “Item_PowerPoint_Modified.html” in Visual Studio or Editor of your choice.

Change the Title from “PowerPoint Item” to “PowerPoint Item Modified”.

Find Property named “ManagedPropertyMapping” and ‘AverageRating’:’AverageRating’ at end of it. We are adding Average Rating because Rating column is Mapped with name AverageRating in Search Schema.



In end Add “ctx.CurrentItem.AverageRating“, this will show numeric value of rating.

Upload this file to Search Display Template folder.

Now go to Site Settings -> Result Types and Create a Copy of “Microsoft PowerPoint” and Rename it to “Microsoft PowerPoint Modified”.

Select “PowerPoint Item Modified” in “What Should these results look like?”

Note: Indexing Rating Column in SharePoint online can take a long time

Notice here that the Value is in text format but the desired result needs to have stars in the rating.

For displaying stars we’ll need to write custom code.

Star.js

$.fn.stars = function () {

return $(this).each(function () {


// Get the value


var val = parseFloat($(this).html());


// Make sure that the value is in 0 – 5 range, multiply to get width


var size = Math.max(0, (Math.min(5, val))) * 16;


// Create stars holder


var $span = $().width(size);


// Replace the numerical value with stars

$(this).html($span);

});

}

$(function () {

$(‘span.stars’).stars();

$(‘span.stars’).toggle();

});

Star.css

span.stars, span.stars
span {

display: block;


background: url(stars.png)
0
-16px
repeat-x;


width: 80px;


height: 16px;

}

span.stars
span {


background-position: 0
0;

}

Stars.png

Upload these files in desired folder and modify the code accordingly. (For sake of demo I just uploaded in Search folder under display template.

Now add this script tag just below body of “Item_Powerpoint_Modified.htm”

<script>
$includeScript(this.url, “https://*****/teams/*****/_catalogs/masterpage/display templates/search/Star.css”);

$includeScript(this.url, “https://******/teams/*****/_catalogs/masterpage/display templates/search/Star.js”);


</script>

Add following code at end of Item_Powerpoint_Modified.htm


<div>_#= $htmlEncode(ctx.CurrentItem.Author) =#_ <span
class=”stars”
style=”display:none;“>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</span></div>

<div>_#= $htmlEncode(ctx.CurrentItem.AverageRating) =#_</div>


Save the file, Upload it to Master Pages – > Display Template ->Search

Now go and check the search page J.


PS: For more info on Rating Control refer to http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css .

Thanks to Tatu Ulmanen without whose help this post would have been incomplete.

More PS : 1. Make Sure Crawl Property of AverageRating is set. For that go to Site Settings -> Search Schema -> Search for AverageRating.

Open AverageRating Managed Property and Add Mapped crawl propert as ows_AverageRating if its not there.


It may take some time before Sharepoint crawls it and it is indexed for search.