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.

Adding Custom New Icon using CEWP in SharePoint

This post uses JavaScript with Content Editor Web Part to add custom new icon.

Use the following approach if your site is not a multilingual one. To achieve the same in multilingual sites, a more dynamic approach is required. New Icon can be found in images of 1033 (English) folder. Each language will have a respective new icon.I have created four icons for this post and placed in 12 Hive\Template\Layouts\Images\Icons.




Step – 1: Add a Content Editor Web Part (CEWP) to your page, where you want to display the custom New Icon. I have used my document library landing page (AllItems.aspx) for this purpose.

Note:
This will show the custom New Icon for that particular page, place the CEWP to your master page if you want to apply custom icon for other pages which references the master page.

Step – 2: Open CEWP Tool Pane, click on “Source Editor”. Place the following script in Source Editor.


<script language="JavaScript">
_spBodyOnLoadFunctionNames.push("ShowCustomNewIcons");

function ShowCustomNewIcons()
{
//Custom New Icon Image path
var newIcon = '_layouts/images/icons/new1.jpg';
var fields,i;
fields = document.getElementsByTagName('IMG');
for( i = 0; i < fields.length; i ++ )
{
var imagesrc = fields[i].getAttribute('SRC');
if(imagesrc.indexOf("new.gif") != -1)
{
fields[i].src = newIcon;
}
}
}
</script>

Once the script added, you can see the custom icon will be shown on the new items instead of the OOB New Icon.

My Fourth SharePoint Article in Codeproject.com

My Fourth Article published in Codeproject.com

Title : SharePoint Tasks Popup using JavaScript API

Description :

This article uses SharePoint’s Content Editor Web part (CEWP) with Darren’s JavaScript API to display the tasks for current logged in user. JavaScript API is used to query the SharePoint Task list and the tasks for the current user will be displayed in the CEWP. See the screen below

Link : http://www.codeproject.com/KB/sharepoint/SharePointTasksPopup.aspx