Sample Client-Side Rendering (CSR) code in SharePoint 2013

function _registerSliderViewTemplate()
{

 //Include link for Category CSS file

var cssId = 'CategoryCss';
if (!document.getElementById(cssId))

{

 var head = document.getElementsByTagName('head')[0];

var link = document.createElement('link');


link.id = cssId;


 link.rel = 'stylesheet';

link.type = 'text/css';

link.href = '/_LAYOUTS/15/ProductCenter/Category.css';

link.media = 'all';


head.appendChild(link);

}

 // Initialize the variable that store the objects.

var overrideCtx = {};


overrideCtx.Templates = {};

overrideCtx.Templates.View = ViewOverrideFunc;

overrideCtx.BaseViewID = 1;

overrideCtx.ListTemplateType = 10347;

 // Register the template overrides.
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

}


// This function builds the output for the view template

function ViewOverrideFunc(ctx) {

 if (ctx.listUrlDir != "/ProductCenter/Lists/Categories")

{

 return RenderViewTemplate(ctx);

}

 var listData = ctx.ListData;

/* This is sctricly neccesary to avoid duplicate content */

if (ctx.Templates.Body == '')
{

 return RenderViewTemplate(ctx);
}

 var finalHtml ='';

finalHtml += "<div class='hot-button-blue-container'>Categories <br/><br/>";

for (var idx in listData.Row)

{
 var listItem = listData.Row[idx];

 var catid = listItem.ID;

var catName = listItem.Title;

var targeturl = 'Products.aspx?CategoryId='+catid+'&amp;'+'Name='+catName;

var imageurl = listItem.PC_ItemImage;

var imagedesc = listItem.PC_ItemImage.desc;

var ImgArrowurl = listItem.FileRef;

 var imgArrUrl = ImgArrowurl.substring(0, ImgArrowurl.indexOf('/Lists'))+'/PublishingImages/ProductCenter/Arrow.png';

 finalHtml += "<div class='hot-commandbutton-grey-normal'>";

finalHtml += "<div>";

finalHtml += "<a href='"+targeturl+"'>";

finalHtml += "<table width='100%'>";

finalHtml += "<a href='"+targeturl+"'>";

finalHtml += "<td width='15%'>";

finalHtml += "<img src='"+imageurl+"' alt='"+imagedesc+"' border='0' />";

finalHtml += "</td>";

finalHtml += "<td width='70%' valign='middle'>";

finalHtml += "<div class='hot-commandbutton-grey-normal-title'>";

finalHtml += catName;

 finalHtml += "</div>";

finalHtml += "</td>";

finalHtml += "<td width='15%' valign='middle'>";

finalHtml += "<a href='"+targeturl+"'>";

finalHtml += "<img src='"+imgArrUrl+"' alt='NavICon' border='0'></img>";

finalHtml += "</a>";

finalHtml += "</td>";

finalHtml += "</a>";

finalHtml += "</table>";

finalHtml += "</a>";

finalHtml += "</div>";

finalHtml += "</div>";

}

 finalHtml += '</div>';

finalHtml += '<div style="clear:both;height:0px;"></div>';

 return finalHtml;
}



(function () {

ExecuteOrDelayUntilScriptLoaded(_registerSliderViewTemplate, 'clienttemplates.js');

})();