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

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

jQuery Files

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);
}

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>'));
}();

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);
})();

// 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.

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

5 Comments

Join the conversation! Your thoughts help the community grow.

venkat Kotaiah9y ago
osmm article..... i tried it for me i am able to display only title filed i am unable to display Descriprion filed on newticker ...can you help out were i am going worng ....thanks
- venkat Kotaiah9y ago
  Saying that whether i have provided incorrect filed name .... am i correct
- Vinodh Narayanan9y ago
  Please check your description field name is correctly render in the context
Madhan Thurai9y ago
Osm......Today i Did it......
- Vinodh Narayanan9y ago
  Thanks for the try man, we can also rendering this way