What is JS Link in SharePoint 2013 and How to use it ?

Hello,

In this post i am going to give you an overview on client side rendering using JSLink in SharePoint 2013.

Client side rendering is nothing but transformation of data at client side. Using this we can do branding on SharePoint List Views, Fields, Search Results etc. This is pretty easy to implement like  changing the look and feel of default web parts like list view web parts.

Lets start with implementation. I have used below script to render an Announcements list view fields. Copy the below script in to your js file.

Java Script:

(function () {
    /*
     * Initialize the variable that store the overrides objects.
     */
var overrideCtx = {};
overrideCtx.Templates = {};

   // Assign functions or plain html strings to the templateset objects:
   // header, footer and item.

overrideCtx.Templates.Header =
    "<div class='WebpartBGColor'><div class='AnnouncementWebpart Webpart'><div class='WebpartHeader'><a href='<#=ctx.listUrlDir#>'><h3 class='Blue'><#=ctx.ListTitle#></h3></a>" +
    "<a href='<#=ctx.newFormUrl#>' id='AnnouncementWebpart' class='Links' ><span>"+ "CONTRIBUTE"  +"</span></a></div>" +
    "<div class='WebpartBody'><div class='ContentArea'><div class='SlideContent' id='Announcement'><ul class='ItemContent'>";

overrideCtx.Templates.Footer = "</ul></div></div><div class='row-fluid AnnouncementWebpartFooter'><div class='ArrowBlock' ><a class='Prev'></a><a class='Next'></a></div></div></div></div>";

 // This template is assigned to the CustomItem function.
overrideCtx.Templates.Item = CustomItem;
overrideCtx.BaseViewID = 1;
overrideCtx.ListTemplateType = 104; //Announcements list template id

 //  Register the template overrides.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

/*
 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
 */
function CustomItem(ctx) {

    if(!ctx.BasePermissions.ManageLists)
    {
      $(document).ready(function(){

      $('#AnnouncementWebpart').addClass('Hide');
     });
    }
 
    var cUrl = window.location.href;
    // Build a listitem entry for every announcement in the list.
    var ret = "<li><div class='row-fluid'><div class='span4'><a href=" + ctx.listUrlDir + "/DispForm.aspx?ID=" + ctx.CurrentItem.ID +
              "&Source=" + cUrl + ">" ;
           
              if(ctx.CurrentItem.AnnouncementImage.indexOf("img") > 0)
              {
             
                ret = ret +"<div class='Image'>" + ctx.CurrentItem.AnnouncementImage+ "</div></div></a>";
              }
              else
              {
           
                ret = ret + "<div class='Image'>" + "<img src='/Style Library/images/DefaultImage.png' />" + "</div></div></a>";
              }
              ret = ret + "<div class='span8'><div class='Title'>" + ctx.CurrentItem.Title+ "</div>" +
           
              "<div class='ReadmoreLink'><a href=" + ctx.listUrlDir + "/DispForm.aspx?ID=" + ctx.CurrentItem.ID +
              "&Source=" + cUrl  + ">" + "Read More..." + "</a></div></div></div></li>";
           
return ret;
}



You need to have below css classes which are used in the above script. Copy below css  to your css file.

CSS:

.AnnouncementWebpart{
position:relative;
padding:12px 15px;
height:135px;
overflow:hidden;
}
.AnnouncementWebpart .WebpartHeader{
width:100%;
float:left;
margin:0px;
padding:0px;
}

.AnnouncementWebpart .SlideContent{
width:100%;
float:left;
height:100px;
overflow:hidden;
margin:0px;
padding:0px;
}


.AnnouncementWebpart li{
height: 100px;
display:none;
}

.AnnouncementWebpart .Image{
width:30%;
height:110px;
float:left;
}

.AnnouncementWebpart .Image img{
width:100px;
height:100px;
border:1px #ccc solid;
}

.AnnouncementWebpart .Title{
color:#333 !important;
width:70%;
height:60px;
overflow:hidden;
float:left;
overflow:hidden;
}

.AnnouncementWebpart .ReadmoreLink{
width:70%;
float:left;
}

.AnnouncementWebpart .ReadmoreLink a,
.AnnouncementWebpart .ReadmoreLink a:link,
.AnnouncementWebpart .ReadmoreLink a:active,
.AnnouncementWebpart .ReadmoreLink a:visited,
.AnnouncementWebpart .ReadmoreLink a:focus,
.AnnouncementWebpart .ReadmoreLink a:hover{
color:#0088cc !important;
}

.AnnouncementWebpart .WebpartFooter {
position:relative;
width:55px;
height:25px;
right:9px;
margin-top:-20px;
float:right;
text-align:right;
z-index:9999;
}

.AnnouncementWebpart .WebpartFooter a.ButtonLeft{
display:block;
float:left;
height:25px;
width:25px;
cursor:pointer;
background-image:url('../../../../../Style%20Library/images/LeftIcon.gif');
}
.AnnouncementWebpart .WebpartFooter a.ButtonRight{
display:block;
float:left;
height:25px;
width:25px;
cursor:pointer;
background-image:url('../../../../../Style%20Library/images/RightIcon.gif');
}
.AnnouncementWebpart .WebpartFooter a{
border:0px;
}


To use this script you have to create an announcements list. In that create a publishing image column named 'AnnouncementImage'. Using the above script i have branded announcements list view to a customized view with scrolling of all announcements having right and left arrows and having 'CONTRIBUTE' link to add the announcements, which can be visible if user having sufficient permissions to add announcement.

Add items and images in to announcements list and perform following activities to achieve the above context.

Add announcements list view web part on to a page

Upload the js file having above script in to style library

Add the js file path to JS link reference of the list view web part

Associate the css file having above classes to the page

Now we are done! You can see a different look of Announcements list view web part on the page.

Thanks!!!