News Ticker Web Part in SharePoint 2013

Solutions Architect

November 15, 2012

Rate this article

Views

2128

News ticker web part in SharePoint 2013 combines jQuery and vTicker plugin for jQuery to provide a perfect news (announcement) ticker for SharePoint Intranet applications. This article is a part of SharePoint intranet web part series which I was blogging for quite some time.

The objective of this article is to create a news ticker as used in www.sharepointfrontier.com. Although our corporate site is built on Orchard , we will use the same concept as applied in our web site to create a news ticker.

This News Ticker web part requires jQuery and jQuery-vTicker plugin to render news content. For this sample I have created a new SharePoint List named as "News" and added couple of items to it. No additional columns have been added for this sample, I am using the default "Title" column as news content.

To begin with , create a new SharePoint 2013 project in visual studio 2012 and add reference to the downloaded script files. You can either provision these files as a part of the solution or you can place those scripts manually to appropriate locations (Style Library or 15 hive) and refer that path in your web part. In this sample I have included those script files as a part of the solution and I am provisioning it into the Style Library.

The below is the screen Shot of my Visual Studio Solution Explorer after adding a Module and referencing the appropriate scripts.

The below is the code for ascx file. In this part we are adding reference to jQuery and vTicker to enable ticker functionality to HTML object

 <SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/Style Library/NewsTicker/Scripts/jquery.js" runat="server" />
 <SharePoint:ScriptLink ID="ScriptLink2" Name="~SiteCollection/Style Library/NewsTicker/Scripts/jquery.vticker.min.js" runat="server" />
 
 <script>
     $(document).ready(function () {
         $('#NewsTicker').vTicker({
             speed: 500,
             pause: 3000,
             showItems: 1,
             animation: 'fade',
             mousePause: true,
             direction: 'up'
         });
     });
 </script>
 <style type="text/css" media="all">
  
 #NewsTicker
 {
     width: 750px; 
     margin: auto;
 }
 
 #NewsTicker ul li div
 {
      height:30px;
     background: #ffffff;
 }
 </style>
 <div id="NewsTicker">
     <ul>
         <asp:Literal ID="ltNews" runat="server"></asp:Literal>
     </ul>
 </div>

The below is the c# source which binds the SharePoint List data

 protected void Page_Load(object sender, EventArgs e)
 {
     BindData();
 }
 
 private void BindData()
 {
     Guid siteId = SPContext.Current.Site.ID;
     Guid webId = SPContext.Current.Web.ID;
     StringBuilder sb = new StringBuilder();
     SPSecurity.RunWithElevatedPrivileges(delegate
             {
                 using (SPSite site = new SPSite(siteId))
                 {
                     using (SPWeb web = site.OpenWeb(webId))
                     {
                         SPList list = web.Lists.TryGetList("News");
                         if (list != null)
                         {
                             foreach (SPListItem item in list.Items)
                             {
                                 sb.AppendLine("<li>");
                                 sb.AppendLine("<div>");
                                 sb.AppendLine(item.Title);
                                 sb.AppendLine("</div>");
                                 sb.AppendLine("</li>");
                             }
                         }
                     }
                 }
             });
     ltNews.Text = sb.ToString();
 }

Different Screen Shots of each News Item. Check Out the live sample of vTicker @ www.sharepointfrontier.com