Sudhir Kesharwani: jQuery - Announcement carousel for SharePoint

The Annoucements Carousel
Your web part should look like following image (announcements.jpg). You will see all the announcements scrolling one by one, Announcement items are linked to the actual announcement page. When you hover the mouse pointer over a news item, the scrolling will stop automatically.

Note: All the required files can be downloaded from
https://docs.google.com/leaf?id=0B1XvO-SvpjhGYWEyYzNhYTYtZTQ5MS00MGRkLTk2ZmYtYTkwZmNlZDAxNmE2&hl=en.
Code is pasted in the email body for reference.

Overview

Recently I have been working on jQuery Carousel plug in and SharePoint. Accidently/fortunately I was able to develop an announcement carousel solution. I thought of posting this to the broader audience. I find this really useful as we can show all the announcements in the smaller area.

Prerequisites

Make sure you have an announcements list in your SharePoint site with some sample announcements.

Step 1 – Required JavaScript and CSS file.

Following files are required for this carousel functionality.

- jQuery library – jQuery 1.4.1 library, you can download it from the jQuery site. I love to rename it to jQuery-latest.min.js. I have used jQuery-1.4.2.min.js

- jCarousel script –I have updated the original jCarousel script for hoverPause functionality as per the comments given in the plug in page. Make sure to use the same.

- News-Ticker-Source.js – this file contains the actual source code to query the announcements links and making it carousel. Make sure to replace {Site Url} with your site url.

- News-ticker.css - Contains style sheet for the announcements list.

The folder structure that I followed in my site is as following, highlighted the folders in the hierarchy.

- Shared Documents

o BIN

§ JQLIB – this folder contains all the JavaScript files

· jQuery-latest.js

· jcarousellite_1.0.1.hoverPause.js

· news-ticker-source.js

§ CSS - this folder contains folder for the style sheet and required images

· News-ticker : Folder for the style sheet.

o Images: folder for images

§ News1.jpg

§ Mic1.jpg

o News-ticker.css : CSS filefor styling.

Note: I have given this folder structure since my code has all the references based on this folder structure, however you can have your own folder structure; make sure to update the references in the HTML script and news-ticker-source.js files.

Step 2 – The JavaScript Code

All the required files are attached with this email. Still thought of putting the code of news-ticker-source.js on to this post.

$(document).ready(function()

{

//Call the method to read data from annoucements list and display it as carousel.

GetAnnoucementData();

});

This function reads the data from annoucement list and passes the control to processResults method

This makes and ajax call to lists.asmx web service.

Make sure to replace {Site URL} with your SharePoint site url.

function GetAnnoucementData()

{

//Prepare the SOAP envelop for calling GetListItems method from lists.asmx web service

var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \

<soapenv:Body> \

<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \

<listName>Announcements</listName> \

<viewFields> \

<ViewFields> \

<FieldRef Name='ows_ID' /> \

<FieldRef Name='LinkTitleNoMenu' /> \

<FieldRef Name='Body' /> \

<FieldRef Name='Expires' /> \

<FieldRef Name='Author' /> \

</ViewFields> \

</viewFields> \

</GetListItems> \

</soapenv:Body> \

</soapenv:Envelope>";

/*Post the request envelop to web service thorugh ajax request and pass the results to processResults method*/

$.ajax({

url: "{SITE URL}/_vti_bin/lists.asmx",

type: "POST",

dataType: "xml",

data: soapEnv,

complete: processResult,

contentType: "text/xml; charset=\"utf-8\""

});

}

/* This method parses the resultant xml and prepares the display.

Please replace {Site Url} with your sharepont site url.

function processResult(xData, status)

{

//Select the root element.

var newnews =$("#newsItems");

var rows;

//Check if query returns no rows

if (xData.responseXML.getElementsByTagName("z:row").length==0)

{

//Prepare the display for 0 rows.

var url = "{SITE URL}/Lists/Announcements/";

var head = "<li><div class='thumbnail'> <img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg'></div>";

var body = "<div class='info'>No news items<a href=" + url + "> Read all</a> <span class='cat'> no items found</span></div>";

var tail = "<div class='clear'></div></li>";

var liHtml = head + body + tail;

//Append the HTML element to newNews element

newnews.append(liHtml);

}

else

{

//Read all the rows from responseXml

rows = xData.responseXML.getElementsByTagName("z:row");

jQuery(rows).each(function()

{

//Read the information from returned rows

var url = "{SITE URL}/Lists/Announcements/DispForm.aspx?ID=" + $(this).attr("ows_ID");

var title = $(this).attr("Title");

var news = $(this).attr("ows_Body");

var author = $(this).attr("ows_Author");

author = author.split('#')[1];

//Prepare the div element

var head = "<li><div class='thumbnail'><img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg'></div>";

var body = "<div class='info'><a href=" + url + ">" + $(this).attr("ows_Title")+ "</a> <span class='cat'>by " + author + "</span></div>";

var tail = "<div class='clear'></div></li>";

var liHtml = head + body + tail;

//Append the resultant element onto newNews element

newnews.append(liHtml);

});

}

//Append entire newNews element to root Div

newnews.appendTo(".newsticker-jcarousellite");

//Prepare the Carousel of all the returned items

$(".newsticker-jcarousellite").jCarouselLite({

vertical: true,

hoverPause: true,

visible: 4,

auto:500,

speed:1000

});

}

Step 3 – The HTML Script

Add a content editor web part on your home page and add following HTML Script in the source editor. (Make sure to update the references of script and css files, replace {SITE URL} with your site url).

</ul>

</div>

References

- http://sorgalla.com/jcarousel/

- http://weblogs.asp.net/jan/archive/2009/05/06/querying-sharepoint-list-items-using-jquery.aspx

Regards, Sudhir Kesharwani MCTS - MOSS 2007 | MCTS - WSS 3.0 | MCPD-EA | MCSD.NET

8 comments:

Sudhir Kesharwani said...: Hi,

I have posted this thorough email, I was not sure if attachments are supported in the blogs or not.

The source code is not attached with this blog.

If anyone wants the code, please reach out to me.; May 14, 2010 at 2:55 AM
Sudhir Kesharwani said...: Hi,

I have uploaded the code on Google Documents and made it available for everyone.

Please follow this URL to download the code.
https://docs.google.com/leaf?id=0B1XvO-SvpjhGYWEyYzNhYTYtZTQ5MS00MGRkLTk2ZmYtYTkwZmNlZDAxNmE2&hl=en

Thanks; May 14, 2010 at 3:03 AM
Unknown said...: Nice solution. some points i can make out here is, we can only have announcement data from a given list. so no rollup functionality, We can have Content Query WP to get the rollup functionality, i guess this would be another reusable great solution :-); June 2, 2010 at 10:11 PM
Anonymous said...: Recently I have come across similar web part.The link is
here; February 26, 2011 at 4:00 PM
Anonymous said...: Thank you for posting this - it worked perfectly and has loads of potential. A great learning exercise too!; November 4, 2011 at 9:53 AM
MAF said...: Hi Sudhir,

Unfortunately it didn't worked for me.

any idea to scroll the announcements !; December 7, 2011 at 2:51 AM
MAF said...: Hi Sudhir,

Actually in SP2010 "shared doc Library" or "Style Library" ....in either cases if we created Folder structure then it is not picking up the files.

So.... just to try, I stored them directly in these library without creating any Folder, It worked fine !!! :-)

(In Moss 2007, it worked the way you show here in blog)

Thanks a lot!; December 9, 2011 at 1:49 AM
Anonymous said...: Didnt work after changing all the URL'S :(

I stored all the files directly in the shared documents library without creating any Folders, It worked perfect! exactly what i wanted!

Thank you; September 30, 2013 at 5:57 AM

Sudhir Kesharwani

Friday, May 14, 2010

jQuery - Announcement carousel for SharePoint

8 comments:

MCPD - EA

MCTS