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

SharePoint 2016 List View JQuery
InfoPath alternatives for form designing SharePoint

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

}

Also read:

– SharePoint online Change SharePoint ListView To Jquery Accordion Using JSLink Client Side Rendering

– How to send an email using designer workflow in SharePoint Online or SharePoint 2013?

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.

Similar SharePoint 2013 Tutorials


Leave a Reply