Creating News Ticker in SharePoint list item Using JSOM

Step1:

Welcome to the designers dairy blog, Here we are going to discuss, how to Create SharePoint 2013 & 2016 list  items into News Ticker using JSOM.

Step2:

Create a list name called Announcement as shown in below image

Step3:

The news lists have two feeds.


Step4:

Below are the code written in javascript function  Tickernews()  to retrieve  data from the list items using CAML Query. And Appending in the page  where u needed.


$(function () {

    ExecuteOrDelayUntilScriptLoaded(Tickernews, "sp.js");

});
  

function Tickernews() {

    var clientContext = new SP.ClientContext();

    var oList = clientContext.get_web().get_lists().getByTitle('Annoucement');

    var camlQuery = new SP.CamlQuery();    

    //camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>"); 

   //camlQuery.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='FirstName'/><Value Type='Text'>Raja</Value></BeginsWith>"

   //                    + "<Gt><FieldRef Name='ID' /><Value Type='Counter'>2</Value></Gt></Where></Query></View>"); 
   

 /*camlQuery.set_viewXml("<View>"

    +"<Query>"
   +"<Where>"
     +" <Or>"
     + "   <Eq>"
           +" <FieldRef Name='FirstName' />"
           +" <Value Type='Text'>Raja</Value>"
        +" </Eq>"
        +" <Gt>"
         +"   <FieldRef Name='ID' />"
          +"  <Value Type='Counter'>3</Value>"
        +" </Gt>"
      +"</Or>"
   +"</Where>"
+"</Query>"


 +"</View>");  */

   camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>");
    
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onTickerSucceeded), Function.createDelegate(this, this.onTickerQueryFailed));

}

function onTickerSucceeded(sender, args) {

    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();
    
    console.log(listItemEnumerator);

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();
    
 

        listItemInfo += '<div style="float:left; width:25%;"><strong>'+ oListItem.get_item("Title") + '</strong> </div> ' + '<div style="float:left; width:75%;"><marquee>' + oListItem.get_item("ShortDescription")  + '</marquee>'

         '<br />';

    }
    console.log(listItemInfo);

    $("#divListItems").html(listItemInfo);
    
     console.log($(".o365cs-nav-centerAlign"));

}

function onTickerQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() +

    '\n' + args.get_stackTrace());

}

Step5:

By Using console log window, we can check the list items are retrieving or not.


    var listItemEnumerator = collListItem.getEnumerator();

If you give the Stored variable   listItemEnumerator in console window.

You fill find

 1.Sp.ArrayList Enumerator  and click - >SpClientObjectData - >  Sharepoint list items will be display  as shown in below screenshot

Title : "Vote Now"

Short_xo220_Description  :  "Vote for favourite Year"

Note : due to space  in list item column xo220 is added

Step6:

Output

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on SharePoint.