SharePoint 2013 - jCarousel Using CSR

Learn using client side rendering to integrate jCarousel for a SharePoint List.

Introduction

This article deals with integrating a simple jQuery carousel plugin called iCarousel into ListView webpart using Client-side Rendering Model.

You should have prior knowledge of CSR basics before you go through this article.

Step 1

Place all the necessary JavaScript files and CSS files into Site Assets library.

• Navigate to the Site Assets library in your site collection.
• Create a folder named JS. This is to place all the JS files.
• Create another folder named Style. This is to place all the stylesheet files.
• Create another folder named Images. This is to place all the images.

For this example, I have used jCarousel plugin.

The JavaScript files required for this carousel are

• Jquery.min.js
• JCarousel.Basic.js
• Jquery.JCarousel.min.js

The stylsheets required are,

• JCarousel.Basic.css

Place the files in the respective folders within the Site Assets library.

Step 2

Create the List with the content for which the carousel needs to be shown. I have created a Cars List as below with 4 columns.

• CarName(Single Line of Text Column)
• ShortDescription(Single Line of Text Column)
• LongDescription(Multiple Line of Text Column)
• CarImage(Hyperlink or Picture column)
   

Step 3

Create a new page and add the above Cars List as a web part to the page.

• Click on Edit
• Click on Insert Tab and Click on web part
• Select the Cars list from the Apps Category
• And Add
• Click on Save

Now, the page will look as below which is the default rendering of the ListView webpart.

 

Step 4

Now, create the JavaScript for rendering the above ListView webpart as a carousel. In order for the list to be converted to a carousel, we need to override the

• Header
• Item
• Footer

Before we override, we need to check if all the necessary files in Step 1 have been included in the page where the Cars List web part has been placed.

If not, we can do the same in this JavaScript file before the override scripts.

As a best practice, always create a namespace in JavaScript so that it acts as a module for related functions.

To load common files, I have created a namespace called commonFiles which has 2 functions - one for creating a script tag and the other for creating a link tag.

var commonFiles = commonFiles || {};
//CommonFiles Namespace
commonFiles.LoadFiles = {
    LoadJs: function(filename) {
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute("type", "text/javascript");
        scriptElement.setAttribute("src", filename);
        document.getElementsByTagName("head")[0].appendChild(scriptElement)
    },
    LoadCss: function(filename) {
        var linkElement = document.createElement('link');
        linkElement.setAttribute("rel", "stylesheet");
        linkElement.setAttribute("type", "text/css");
        linkElement.setAttribute("href", filename);
        document.getElementsByTagName("head")[0].appendChild(linkElement)
        //return linkElement;
    }
};

The above method will be used in the self executing function which holds the override functionality for CSR.

Here, I am loading the files present in Step 1.

//CSR Script for car list
(function() {
    commonFiles.LoadFiles.LoadCss("SiteAssets/Style/jcarousel.css");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jquery.js");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jcarousel.js");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jcarousel.basic.js");
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = carCarousel.car.carHeaderHtml;
    overrideCtx.Templates.Item = carCarousel.car.carItemHtml;
    overrideCtx.Templates.Footer = carCarousel.car.carFooterHtml;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Once the necessary files are loaded for the carousel, we will override the header, item, and footer of the webpart.

Here again, I have used a namespace for carCarousel in which 3 functions are present, namely

• carHeaderHtml
• carItemHtml
• carFooterHtml

//CarCarousel Namespace
var carCarousel = carCarousel || {};
carCarousel.car = {
    carItemHtml: function(ctx) {
        var cars;
        //var html = "Car Name: <b>" + ctx.CurrentItem.CarName + "</b>";
        var html = "<li><div> <img src='" + ctx.CurrentItem.CarImage + "' width='1000px' height='400px' /><div style='border:0px solid green;height:20px;width:250px;position:relative;top:-90px;left:650px;color:#FFF;background- color:#000;opacity:0.7;border-radius:3px;text-align:center;font-weight:bold;'>" + ctx.CurrentItem.ShortDescription + "</div> </div><div style='width:600px'>" + ctx.CurrentItem.LongDescription + "</div></li>";
        //html += "<br> Car Description: <b>" + ctx.CurrentItem.ShortDescription + "</b><br><br>";
        return html;
    },
    carHeaderHtml: function() {
        var carHeaderHtml = "<p style='font-size:30px;font-weight:bold;'>Latest cars of 2017</p><div class='jcarousel-wrapper'><div class='jcarousel'><ul>";
        return carHeaderHtml;
    },
    carFooterHtml: function() {
        var carFooterHtml = "</ul></div>";
        carFooterHtml += "<a href='#' class='jcarousel-control-prev'>‹</a>";
        carFooterHtml += "<a href='#' class='jcarousel-control-next'>›</a>";
        carFooterHtml += "<p class='jcarousel-pagination'></p></div>";
        return carFooterHtml;
    }
};

The above methods will be called in the self-executing function after the LoadFiles methods.

//CSR Script for car list
(function() {
    commonFiles.LoadFiles.LoadCss("SiteAssets/Style/jcarousel.css");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jquery.js");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jcarousel.js");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jcarousel.basic.js");
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = carCarousel.car.carHeaderHtml;
    overrideCtx.Templates.Item = carCarousel.car.carItemHtml;
    overrideCtx.Templates.Footer = carCarousel.car.carFooterHtml;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

The complete JavaScript code for car carousel is given below.

var commonFiles = commonFiles || {};
//CommonFiles Namespace
commonFiles.LoadFiles = {
    LoadJs: function(filename) {
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute("type", "text/javascript");
        scriptElement.setAttribute("src", filename);
        document.getElementsByTagName("head")[0].appendChild(scriptElement)
        //return scriptElement;
    },
    LoadCss: function(filename) {
        var linkElement = document.createElement('link');
        linkElement.setAttribute("rel", "stylesheet");
        linkElement.setAttribute("type", "text/css");
        linkElement.setAttribute("href", filename);
        document.getElementsByTagName("head")[0].appendChild(linkElement)
        //return linkElement;
    }
};
//CarCarousel Namespace
var carCarousel = carCarousel || {};
carCarousel.car = {
    carItemHtml: function(ctx) {
        var cars;
        //var html = "Car Name: <b>" + ctx.CurrentItem.CarName + "</b>";
        var html = "<li><div> <img src='" + ctx.CurrentItem.CarImage + "' width='1000px' height='400px' /><div style='border:0px solid green;height:20px;width:250px;position:relative;top:-90px;left:650px;color:#FFF;background- color:#000;opacity:0.7;border-radius:3px;text-align:center;font-weight:bold;'>" + ctx.CurrentItem.ShortDescription + "</div> </div><div style='width:600px'>" + ctx.CurrentItem.LongDescription + "</div></li>";
        //html += "<br> Car Description: <b>" + ctx.CurrentItem.ShortDescription + "</b><br><br>";
        return html;
    },
    carHeaderHtml: function() {
        var carHeaderHtml = "<p style='font-size:30px;font-weight:bold;'>Latest cars of 2017</p><div class='jcarousel-wrapper'><div class='jcarousel'><ul>";
        return carHeaderHtml;
    },
    carFooterHtml: function() {
        var carFooterHtml = "</ul></div>";
        carFooterHtml += "<a href='#' class='jcarousel-control-prev'>‹</a>";
        carFooterHtml += "<a href='#' class='jcarousel-control-next'>›</a>";
        carFooterHtml += "<p class='jcarousel-pagination'></p></div>";
        return carFooterHtml;
    }
};
//CSR Script for car list
(function() {
    commonFiles.LoadFiles.LoadCss("SiteAssets/Style/jcarousel.css");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jquery.js");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jcarousel.js");
    commonFiles.LoadFiles.LoadJs("SiteAssets/JS/jcarousel.basic.js");
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = carCarousel.car.carHeaderHtml;
    overrideCtx.Templates.Item = carCarousel.car.carItemHtml;
    overrideCtx.Templates.Footer = carCarousel.car.carFooterHtml;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Step 5

Place the created JavaScript file into the Site Assets folder where all the JS files are present.

Step 6

After placing the JavaScript file, this needs to be placed in the ListView webpart added into the page.

• Edit the page.
• Click on Edit Webpart
• Expand Miscellaneous
• Give the path to the javascript file in the JSLink.
• Click OK.
  
   

You will see the below after you click OK in the Edit webpart section.



Summary

CSR is an easy way to change the look and feel of the List View webpart.

Prior to Sharepoint 2013, rendering was done by XSLT but in SharePoint 2013, it has moved to client side rendering using JSLink webpart property.