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

0
390
views

In this article, 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

Open sharepoint designer

Navigate into 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 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

Click Ok

 

Conclusion:

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

Download Code:  NewsTicker

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here