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.

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

  1. //Declare the style inside a javascript file  
  2. //Declare my custom css for design HTML  
  3. var cssId = 'myCss';  
  4. if (!document.getElementById(cssId)) {  
  5.     var head = document.getElementsByTagName('head')[0];  
  6.     var link = document.createElement('link');  
  7.     link.id = cssId;  
  8.     link.rel = 'stylesheet';  
  9.     link.type = 'text/css';  
  10.     link.href = ' https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/css/ticker.css’;  
  11.     link.media = 'all';  
  12.     head.appendChild(link);  
  13. }  

Create a function to override the list template

Inside the function, call all the jQuery references.

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

Create a variable Overridectx

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

As of now, you get -

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

Now, implement the function News template

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

Full Code

  1. //Declare my custom css for design HTML  
  2. var cssId = 'myCss';  
  3. if (!document.getElementById(cssId)) {  
  4.     var head = document.getElementsByTagName('head')[0];  
  5.     var link = document.createElement('link');  
  6.     link.id = cssId;  
  7.     link.rel = 'stylesheet';  
  8.     link.type = 'text/css';  
  9.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/css/ticker.css';  
  10.     link.media = 'all';  
  11.     head.appendChild(link);  
  12. }  
  13. (function() {  
  14.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));  
  15.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));  
  16.     var overrideCtx = {};  
  17.     overrideCtx.Templates = {}  
  18.     overrideCtx.Templates.Header = "<div class='ticker-container'><div class='ticker-caption'><p>Breaking News</p></div><ul>";  
  19.     overrideCtx.Templates.Item = newsTemplate;  
  20.     overrideCtx.Templates.Footer = "</ul></div>";  
  21.     // This line of code tell TemplateManager that we want to change all HTML for item row render  
  22.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  23. })();  
  24. // This function provides the rendering logic  
  25. function newsTemplate(ctx) {  
  26.     // Return whole item html  
  27.     return "<div><li><span>" + ctx.CurrentItem.Title + " <span></span><a href='#'>" + ctx.CurrentItem.Descriprion + "</a></span></li></div>";  
  28. }  

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.