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

http://jquery.com/

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.