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

SharePoint 2016 List View JQuery
Sign up for an Office 365 SharePoint Online Business Subscription


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 look like below:

SharePoint List View JQuery
SharePoint List View JQuery

Open sharepoint designer
Navigate into SiteAssets -> Create a Javascript file


SharePoint online List View JQuery
SharePoint online List View JQuery

Upload the required Jquery files and CSS files into site assets folder
Css Files:
– ticker.css
Jquery Files :
– Jquery-min.js
– ticeker.js
Now 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

SharePoint 2013 List View JQuery
SharePoint 2013 List View JQuery

Click Ok

SharePoint 2016 List View JQuery
SharePoint 2016 List View JQuery

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


You May Also like the Following SharePoint Online Tutorials: