Display Templates e Rating Stars

Posted on September 3, 2013

0


Come personalizzare un Display Template della Content Search Web Part in modo che visualizzi in forma grafica il rating di un elemento?

Ovvero così?

image

 

Il mio punto di partenza è stato questo thread, in cui si spiega in maniera molto chiara come tradurre un valore numerico, tramite HTML, CSS e jQuery in un sistema di star rating:

http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css

I dati numerici relativi al Rating sono a nostra disposizione mediante queste due Managed Properties:

a) AverageRating (ovvero la media dei voti)

b) RatingCount (ovvero il numero dei votanti)

Abbiamo pertanto bisogno di creare un custom Display Template (partendo tranquillamente dalla copia di uno esistenti) e procedere con le seguenti modifiche:

1)  Definire quali Managed Properties devono essere disponibili e richiamabili dal JavaScript del template, tra queste le due Managed Properties utili per lo Star Rating
<mso:ManagedPropertyMapping msdt:dt="string">‘Link URL’{Link URL}:’Path’,’Line 1’{Line 1}:’Title’,’Line 2’{Line 2}:’owstaxIdTopic’,’Average Rating’{Average Rating}:’AverageRating’,’Rating Count’{Rating Count}:’RatingCount’</mso:ManagedPropertyMapping>

2) Modificare il template in modo da gestire adeguatamente elementi con Rating disponibile ed elementi senza Rating

var line3 = $getItemValue(ctx, "Average Rating");
if (line3 == ”){
var line3 = ‘0’;
}
else {
var line3 = $getItemValue(ctx, "Average Rating");
}

var line4 = $getItemValue(ctx, "Rating Count");
if (line4 == ”){
var line4 = ‘0’;
}

3) Costruire l’HTML

<div class="cbs-Line2 ms-noWrap" title="Rating">
<span class="stars">_#= line3 =#_</span><span class="countRates"> | _#= line4 =#_</span>
</div>

4) Referenziare lo script che via jQuery consente la conversione del valore numerico come “star rating

<script>
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Template/scripts/stars.js");
</script>

5) Chiamare lo script

ctx.OnPostRender = [];

    ctx.OnPostRender.push(function() {
$(‘span.stars’).stars();
});

6) Referenziare il CSS nella pagina in cui viene utilizzato il Display Template: quindi o da master page o da page layout.

Di seguito CSS, JS  e immagini utili

star.css

span.stars, span.stars span {
display: block;
background: url(../img/stars.png) 0 -20px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
.countRates /*sposto Rating Count di fianco all’Avarage rating*/{
display:block;
margin-top:-17px;
margin-left:80px;
}

star.js

var $ = jQuery.noConflict();

$.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 = $(‘<span />’).width(size);
// Replace the numerical value with stars
$(this).html($span);
});

}

Immagine

stars

Per maggiori informazioni sui Display Templates, questo è il migliore punto di partenza: http://msdn.microsoft.com/en-us/library/jj945138.aspx

Advertisements
Posted in: SharePoint