Friday, August 7, 2009

Flash Tag Cloud in SharePoint using jQuery

This post uses WP-Cumulus plugin and SharePoint Content Editor Web Part to display Tags or any SharePoint list data in 3D format. The data from SharePoint list has been queried using jQuery. See the below screens which shows Tag Cloud in a SharePoint Page.



See the Tag Cloud in action here.

WP-Cumulus
WP-Cumulus allows you to display your site's tags, categories or both using a Flash movie that rotates them in 3D. There are different configuration options available like changing the color, style etc

For more information refer the following link (download)
http://wordpress.org/extend/plugins/wp-cumulus/

jQuery
jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. Refer the interesting post from Jan Tielens to query SharePoint list data using jQuery.
For more information refer the following link

Here the Steps to create Tag Cloud using SharePoint list data with the use of jQuery.

Upload WP-Cumulus Files

You can use “Shared Documents” or create a new Document Library to hold the necessary files. I have created a new Document Library called “Tag Cloud” to hold the Tag Cloud related files. Download the WP-Cumulus from the above specified link, I have used version - 1.21. Extract the files and upload “swfobject.js” and “tagcloud.swf” files to the document library.


Creating a SharePoint list for holding Tag details

Create a SharePoint list with the following fields. You can see the list “Tags” with sample data in first screen.

Field Name - Type - Description

Tags - Single Line of Text - This field holds the Tag name
Link - Single Line of Text - This field points to the Tag Link
Style - Single Line of Text - This field holds a style number

Adding Content Editor Web part

Open your page (where you want to display Tag Cloud) in Edit Mode (Site Actions --> Edit Page), add Content Editor Web Part (CEWP) to any one Web part Zone. Copy and Paste the following code to the Source Editor of CEWP.

Note:

If you want the Tag Cloud in all other pages then add CEWP to the master page)
Script


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" > </script>

<script type="text/javascript" src="/sites/Demo/Tag%20Cloud/swfobject.js"></script>



<div id="flashcontent">This will be shown to users with no Flash or Javascript.</div>



<script type="text/javascript">

var tags = "";

$(document).ready(function() {

var soapEnv =

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

<soapenv:Body> \

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

<listName>Tags</listName> \

<viewFields> \

<ViewFields> \

<FieldRef Name='Tag' /> \

<FieldRef Name='Link' /> \

<FieldRef Name='Style' /> \

</ViewFields> \

</viewFields> \

</GetListItems> \

</soapenv:Body> \

</soapenv:Envelope>";


$.ajax({

url: "_vti_bin/lists.asmx",

type: "POST",

dataType: "xml",

data: soapEnv,

complete: processResult,

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

});

});


function processResult(xData, status) {

$(xData.responseXML).find("z\\:row").each(function() {


tags += "<a href='" + $(this).attr("ows_Link") + "' style='" + $(this).attr("ows_Style") + "'>" + $(this).attr("ows_Tag") + "</a>";

});


var tagDetails = "<tags>" + tags + "</tags>";


var so = new SWFObject("/sites/Demo/Tag%20Cloud/tagcloud.swf", "tagcloud", "230", "200", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x111111");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", tagDetails);

so.write("flashcontent");


}

</script>

Note:

Replace the text marked in red with your respective document library relative path, list name and field names.

A dynamic Tag Cloud is ready, now you can add/ modify the “Tags” list data and it will be reflected in Tag Cloud.

4 comments:

Unknown said...

Hi,
thank you for this post but it doesn't work in my sharepoint site although I followed the above steps. what did you mean with the red word "own_Link" ..etc. did you mean my List columns.

Nehal Al-jurf

Zabiullah Sheik Ismail said...

Thank you!
Yes ows_Link is the column name. Please check your column names, if its wrong then it wont work.

Unknown said...

Hi

I am creating this for my SharePoint. Its not working for me.

Please explain what should be style number in the list. If I keep this column blank will it work? Do you have any references to get these numbers?

Thanks
nilesh

Janus0104 said...

Hi, and thank you for your tutorial.

Even though this is an old post, I would like to add some comments for those who also spend some time scratching their heads why it doesn't work:

1.) Make sure the jQuery url works. https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js seems to be the most current one that you don't have to upload.
2.) If you dont get a flash box, or get a flash box but rightclicking says Movie not loaded, check your URLs to the uploaded files.
3.) Double-check your names. List name is as it appears in the URL, column names are as they appear in the URL when you sort a list view by those columns. For parsing the columns into a link in the lower half of the script, don't forget checking for prefix. Mine was ows_ but it could be different I guess?
4.) The line with url: "_vti_bin/lists.asmx",
is crucial. Make sure the link is correct, or go for full link (it goes up until current site, then /_vti...)
5.) If you don't get it to work right away, take it slow. Copy&Paste your effort somewhere else, then start with this:

http://sharepointresource.com/2011/03/11/jquery-getting-data-from-a-sharepoint-list/

It will guide you through getting data from a list with jQuery in an easy way with alert message boxes, so you can see how far it works right away and can probably find your error along the way.

Hope this helps others :)

Peace out,
Jones