Change the SharePoint List View into JQuery News Ticker Using JS Link CSR

SharePoint 2016 List View JQuery
SharePoint deveopment training course

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 -> Add some information into it
My sample list looks like below:

sharepoint online jslink example using jquery
sharepoint online jslink example using jquery

Navigate into SiteAssets -> Create a Javascript file

sharepoint 2013 jslink example using jquery
sharepoint 2013 jslink example using jquery

Upload the required Jquery files and CSS files into the site assets folder in SharePoint.
Css Files:

  • ticker.css

Jquery Files:

  • Jquery-min.js
  • ticeker.js

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

//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 and 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 web part. Go to the page -> Edit page-> Click Edit web part. Under miscellaneous -,> link the Js file.

sharepoint 2013 jslink example
sharepoint 2013 jslink example

Click Ok.

Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
Change the SharePoint List View into JQuery News Ticker Using JS Link CSR

You may like following jslink in SharePoint 2013 tutorials:

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

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope