SharePoint News Ticker WebPart

Most of the news websites contain news tickers. There are several JQuery plugins available for doing this.
My requirement was to use the News Ticker in SharePoint webpart page and the news items needed to be read from a SharePoint list like announcements.

video

Here is how it can be done. First download the news ticker js file from here.
Also download the latest minified jquery file from here:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Now create a SharePoint Empty project named TickerWebparts. Then Add a Visual Webpart project to the solution. Name it NewsTickerWebpart. Add a SharePoint "Layouts" Mapped folder to the solution. The javascript files will be placed here. The solution structure should look like this.

Copy both jquery.min.js and newsticker.js files in the JS folder inside TickerWebparts folder in Layouts folder. Notice that I have changed the name of the jquery.min.js file to jquery.1.6.2.min.js in order to recognize the version of Jquery.
Open the .ascx contol in design mode and paste the following code in it after all the import and register statements.

<script type="text/javascript" src="/_layouts/TickerWebparts/JS/jquery.1.6.2.min.js"></script>
<script type="text/javascript" src="/_layouts/TickerWebparts/JS/jquery.newsticker.js"></script>
<script type="text/javascript">
    $(document).ready(
       function () {
           $("#news").newsTicker();
       }
);
</script>
<style type="text/css">
.newsticker {
       list-style-type: none;
}
</style>
<div>
<asp:Label ID="lblNews" runat="server"></asp:Label>
</div>


Open the webpart cs file, in our case NewsTickerWebpart.cs file and paste the following code inside the class.


private const string _ascxPath = @"~/_CONTROLTEMPLATES/TickerWebparts/NewsTickerWebpart/NewsTickerWebpartUserControl.ascx";

        private StringBuilder listElements = new StringBuilder();
        Control control = null;
        [WebBrowsable]
        [Personalizable(PersonalizationScope.Shared)]
        [WebDisplayName("List name")]
        [WebDescription("Enter the name of the list.")]
        public string ListName
        {
            get;
            set;
        }

        protected override void CreateChildControls()
        {
            control = Page.LoadControl(_ascxPath);
            Controls.Add(control);
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            Label label = (Label)control.FindControl("lblNews");
            if (string.IsNullOrEmpty(ListName))
            {
                label.Text = "News ticker webpart is not configured. Please enter the name of                   the list.";
                this.Controls.Add(label);
            }
            else
            {
                try
                {
                    listElements.Append("<ul id='news'>");
                    SPWeb web = SPContext.Current.Web;
                    SPList list = web.Lists[ListName];
                    SPListItemCollection items = list.Items;
                    foreach (SPListItem item in items)
                    {
                        listElements.Append("<li>");
                        string title = item.Title;
                        listElements.Append(title);
                        listElements.Append("</li>");
                    }
                    listElements.Append("</ul> ");
                    writer.Write(listElements);
                }
                catch (Exception ex)
                {
                    label.Text = ex.Message;
                    this.Controls.Add(label);
                }

            }

            base.RenderContents(writer);
        }

 Build and deploy the solution and add the webpart to the page. Provide the name of the list which contains news in the configuration section of the webpart  

profile for Nadeem Yousuf at SharePoint Stack Exchange, Q&A for SharePoint enthusiasts

+