Change The SharePoint List View Into JQuery News Ticker Using JS Link - CSR

In this blog, I have explained how to change the SharePoint List View to Horizontal display of items using JSLink.

Navigate to SharePoint site.

Create a custom list and add some information into it.

My sample list looks like below.

 

Open SharePoint Designer.

Navigate to SiteAssets.

Create a JavaScript file.

 

 

Upload the required jQuery files and CSS files into Site Assets folder.

CSS Files

• ticker.css

jQuery Files

• Jquery-min.js
• ticker.js

Now, I am going to include the scripts and stylesheets into my “NewsTicker.js”.

Code

//Declare the style inside a javascript file
//Declare my custom css for design HTML
var cssId = 'myCss';
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 = ' https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/css/ticker.css’;
    link.media = 'all';
    head.appendChild(link);
}

Create a function to override the list template

Inside the function, call all the jQuery references.

(function() {
        (window.jQuery || document.write('<script src=" https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));
        (window.jQuery || document.write('<script src=" https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));
    }();

Create a variable Overridectx

var overrideCtx = {};
//Get the template of the list using variable
overrideCtx.Templates = {}
//Get the list Header
overrideCtx.Templates.Header = ” < div class = ’ticker - container’ > < div class = ’ticker - caption’ > < p > Breaking News < /p> < /div>";
//Get the item template from the function NewsTemplate (ctx)
overrideCtx.Templates.Item = NewsTemplate;
//Get the list footer
overrideCtx.Templates.Footer = “ < /div>”;

As of now, you get -

(function() {
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {}
    overrideCtx.Templates.Header = "<div class='ticker-container'><div class='ticker-caption'><p>Breaking News</p></div><ul>";
    overrideCtx.Templates.Item = newsTemplate;
    overrideCtx.Templates.Footer = "</ul></div>";
    // This line of code tell TemplateManager that we want to change all HTML for item row render
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Now, implement the function News template

// This function provides the rendering logic
function newsTemplate(ctx) {
    // Return whole item html
    return "<div><li><span>" + ctx.CurrentItem.Title + " <span></span><a href='#'>" + ctx.CurrentItem.Descriprion + "</a></span></li></div>";
}

Full Code

//Declare my custom css for design HTML
var cssId = 'myCss';
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 = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/css/ticker.css';
    link.media = 'all';
    head.appendChild(link);
}
(function() {
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {}
    overrideCtx.Templates.Header = "<div class='ticker-container'><div class='ticker-caption'><p>Breaking News</p></div><ul>";
    overrideCtx.Templates.Item = newsTemplate;
    overrideCtx.Templates.Footer = "</ul></div>";
    // This line of code tell TemplateManager that we want to change all HTML for item row render
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
// This function provides the rendering logic
function newsTemplate(ctx) {
    // Return whole item html
    return "<div><li><span>" + ctx.CurrentItem.Title + " <span></span><a href='#'>" + ctx.CurrentItem.Descriprion + "</a></span></li></div>";
}

Let’s include the JS file into List View webpart.

Go to the page -> Edit page-> Click Edit webpart.

Under miscellaneous -> link the JS file.

Click OK.

Conclusion

You are now able to render any kind of HTML design using JSLink Client side rendering into SharePoint list and libraries.