Click here to Skip to main content
14,603,442 members

JSLink - Custom JS Rendering in SharePoint 2013

Rate this:
4.20 (4 votes)
Please Sign up or sign in to vote.
4.20 (4 votes)
10 Jan 2013CPOL
JSLink is the new feature introduced in SharePoint 2013, loading off the burden of XSLT webparts from the developer's mind.
JSLink is the new feature introduced in SharePoint 2013, loading off the burden of XSLT webparts from the developer's mind. Let me show you an example. I have two lists "Movies" and "Books".
Image 1

But I want to display them on a page like  . . .
Image 2
All this can be done just by using Java script and without creating a single webpart.
Lets see how to accomplish this task.

Step 1: 
Create an empty SharePoint project. Follow the steps mentioned in below image to create basic infrastructure.
Create all the required site columns. If you are not clear on this task, you can see Elements.xml file under "BookSiteColumns" from my sample code embedded below.
Image 3

While creating content types, visual studio will display all the available fields (Existing in site + New ones you just created in this project). Select required fields to create the Content type.
Image 4

once Content types are created, now create a list as shown below, and then you can associate the required content type.
Image 5

Associating the newly created content types.
Image 6

With this we created the required, Fields, Content Types and Lists.

Step 2:
Go to Movies List in VS2012 , and expand it.  First understand what we have here.
Image 7
Elements.xml under MoviesInstance node will talk about the default data that can be populated in to movies list while deployment.
Elements.xml under Movies node will contain the definition of List like Name, template Type, Display name , etc.
Schema.xml under Movies node will have the detail of all the ContentTypes associated and Views available, and what fields will be displayed in each view.

Step 3:
By this time, you might have understood that we need to modify Schema.xml.
By default there will be couple Views available in schema file. Now I will create definition of a new View and add it in <Views></Views> section of schema.
<View BaseViewID="2" Name="96E9EE4D-FCE6-44C3-A46B-434326DDAD6C"
      DisplayName="CustomJSRendering" Type="HTML"
      WebPartZoneID="Main" SetupPath="Pages\ViewPage.aspx"
      Url="CustomJSRendering.aspx" DefaultView="TRUE">
  <FieldRef Name="Movie"  DisplayName="Movie Name"/>
    <FieldRef Name="PopularityPercent" DisplayName="Popularity"/>
  <Query />
  <Toolbar Type="Standard" />
  <yellow><JSLink Default="TRUE">CustomJSRendering1.js</JSLink></yellow>      </View>
Here we need to stress on a few important things. Url part of definition, you dint have any page with name "CustomJSRendering.aspx", but framework will take "Pages\ViewPage.aspx" page and mock it up with the definition and will render with name as "CustomJSRendering.aspx".

Step 4:
The definition says about the Name, ID, Url, Fields to be displayed. Now look at <JSLink> tag highlighted above. This says sharepoint that the way of rendering this View will be controlled by "CustomJSRedering1.js" file.
Now look at both the views of Movies list on top. I want to modify just the "PopularityPercent" field to display some colors based on the Values.
For that below is the JS content.
(function () {
    var overrideContext = {};
    overrideContext.BaseViewID = 2;
    overrideContext.ListTemplateType = 10001;
    overrideContext.Templates = {};
    overrideContext.Templates.Header = "<h2>My Custom Rendering Movies View</h2>";
    overrideContext.Templates.Fields = { 'PopularityPercent': { 'View': PopularityViewTemplate } };
function PopularityViewTemplate(ctx) { 
    var popularity = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var color = getColor(popularity);
    return "&nbsp;&nbsp;&nbsp;&nbsp;<span style='background-color : " + color + "' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + popularity + "%";
function getColor(pop) {
    if (parseInt(pop) > 70)
        return "Green";
    else if (parseInt(pop) > 40)
        return "Yellow";
    else if (parseInt(pop) > 20)
        return "Orange";
        return "Red";
You can specify as <JSLink>~/Scripts/xxxxxx.js</JSLink> if you intend to deploy it in your VD. But sometimes sharepoint won't recognize the Script files. In that case you can simple mention as <JSLink>xxxxxx.js</JSLink> and deploy the script file to "15/Templates/Layouts".

Image 8
Note: If you wish to see the AllItems View of this list, simply go to URL and change the CustomJSRendering.aspx to AllItems.aspx.

Step 5:
We have modified the rendering of a single field using <JSLink>. Now I want to modify complete View of Book List. Again same steps, define a new View in Schema.xml file under Books List node.
<View BaseViewID="2" Name="08B44EC8-7DC9-4C63-B43A-D867B869F625"
      DisplayName="CustomJSRendering" Type="HTML"
      WebPartZoneID="Main" SetupPath="Pages\ViewPage.aspx"
      Url="CustomJSRendering.aspx" DefaultView="TRUE">
    <FieldRef Name="BookName" />
    <FieldRef Name="BookAuthor" />
    <FieldRef Name="AuthorCountry" />
  <Query />
  <Toolbar Type="Standard" />
  <JSLink Default="TRUE">CustomJSRendering.js</JSLink>
I will define how I want to render the view inside CustomJSRender.js file.
(function () {
    var overrideContext = {};
    overrideContext.BaseViewID = 2;
    overrideContext.ListTemplateType = 10000;
    overrideContext.Templates = {};
    overrideContext.Templates.Header = "<h2>My Custom Rendering Books View</h2>";
    overrideContext.Templates.Item = customItem;
function customItem(ctx) {
    var ItemStyle = "display:inline-block;width:200px;height:120px;" +
        "border:2px black solid;background-color:#ffe;padding-top:20px;" +
    var ItemHTML = "<div style='" + ItemStyle + "'><h2>"
        + ctx.CurrentItem.BookName + "</h2>" +
        "<br/><br/><br/><em>" + ctx.CurrentItem.BookAuthor
        + "</em><br/><em><b>" + ctx.CurrentItem.AuthorCountry + "</b></em></div>";
    return ItemHTML;
Here is the output.
Image 9

Step 6:
Now this is really an interesting part, when I want to display these lists on a Site Page, I just need to insert these Lists using Insert section in Edit mode of a Site page.
Image 10
Once I insert both the Lists on Site page and save and view it in browse mode. The lists will be shown as we intended and designed, thanks to <JSLink>.
Image 11

Sample Code :  Download "SP13CustomViewRendering.Zip" from my codebase library.

We have created a customized view for custom lists, with using new SharePoint 2013 feature <JSLink>.

Is it helpful for you? Kindly let me know your comments / Questions.
Image 12


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Comments and Discussions

GeneralUnable to Download Sample Code! Pin
Anish V6-Jan-14 17:36
MemberAnish V6-Jan-14 17:36 
GeneralRe: Unable to Download Sample Code! Pin
PratapReddyP14-Jan-14 12:33
MemberPratapReddyP14-Jan-14 12:33 
GeneralHi Pratap Pin
adnswamy2-Dec-13 23:55
Memberadnswamy2-Dec-13 23:55 
QuestionJSLink not loading Pin
steve.csharp15-Oct-13 21:39
Membersteve.csharp15-Oct-13 21:39 
Generalgreat !!! Pin
Amit Yaduwanshi20-Feb-13 22:40
MemberAmit Yaduwanshi20-Feb-13 22:40 
GeneralMy vote of 2 Pin
rahman_tanzilur0113-Jan-13 11:04
Memberrahman_tanzilur0113-Jan-13 11:04 
GeneralRe: My vote of 2 Pin
PratapReddyP14-Jan-13 18:08
MemberPratapReddyP14-Jan-13 18:08 
QuestionWhat about string resources? Pin
ZeBobo510-Jan-13 7:23
MemberZeBobo510-Jan-13 7:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 10 Jan 2013

Tagged as


6 bookmarked