How to use Client Side Rendering (JSLink) in a SharePoint Hosted APP

JSLink is a new feature that is introduced in SharePoint 2013. It is a combination of Html, javascript and css to customize the rendering of SharePoint List views and forms. It can be called as Client Side Rendering (CSR rather than writing a XSLT)

· The rendering happens in the client side, so the pages can load faster with CSR.

· Compare to XSLT, JavaScript will be easier to development and debugged.

· We can customize specific fields, header, body and footer.

Create a SharePoint hosted app.

Adding columns in the list.

Adding custom view to the list can be provide any name and select the columns to view.

Schema.xml under view 2 include the custom script.

 <View BaseViewID="2" Name="2757a7d6-f368-47e7-bbda-5bcfdb318b60" DisplayName="NewView" Type="HTML" WebPartZoneID="Main" SetupPath="pagesviewpage.aspx" Url="NewView.aspx">
 <ViewFields>
     <FieldRef Name="LinkTitle" />
     <FieldRef Name="StartDate" />
     <FieldRef Name="_EndDate" />
     <FieldRef Name="PercentComplete" />
     <FieldRef Name="Project" />
     <FieldRef Name="Edit" />
 </ViewFields>
 <Query />
 <Toolbar Type="Standard" />
 <XslLink Default="TRUE">main.xsl</XslLink>
 <JSLink Default="TRUE">~site/Scripts/ListRender.js</JSLink>
 </View>

Add the ListRender.js under the script folder

 (function () {
     var overrideCtx = {};
     overrideCtx.Templates = {};
     overrideCtx.Templates.Header = "<h2><#=ctx.ListTitle#></h2>" +
         "<table class='table table-striped'><tr><th>Title</th><th>Start Date</th><th>End Date</th><th>Project</th><th>Progress </th></tr>";
     // This template is assigned to the CustomItem function.
     overrideCtx.Templates.Item = customItem;
     overrideCtx.Templates.Footer = "</table>";
     overrideCtx.BaseViewID = 2;
     overrideCtx.ListTemplateType = 100;
     overrideCtx.OnPreRender = loadCss;
     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
 })();
 
 function customItem(ctx) {
     var ret = "<tr><td>" + ctx.CurrentItem.Title + "</td>";
     ret += "<td>" + ctx.CurrentItem.StartDate + "</td>";
     ret += "<td>" + ctx.CurrentItem._EndDate + "</td>";
     ret += "<td>" + ctx.CurrentItem.Project + "</td>";
     ret += "<td>" + getProgress(parseInt(ctx.CurrentItem["PercentComplete."])) + "</td></tr>"
     return ret;
 }
 
 function getProgress() {
     return  '<div class="progress">' +
             '<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:' + value + '%">' + value + '%' +
             '</div></div>';
 }
 
 function loadCSS(ctx) {
     document.write('<link rel="Stylesheet" type="text/css" href="../../Content/bootstrap.css"/>');
 }