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.

Site Aggregator Web Part of SharePoint

Site Aggregator is a simple and straight-forward web part, can be used to display sites (specific page in a site) of our choice.

The following are the important properties of Site Aggregator WebPart.

Properties of Site Aggregator

1. Number of characters before ellipses
Sets the number of characters that should be rendered in a tab before truncating and showing ellipses

Default value of this property is 30

2. Number of tabs to show before more dropdown
Sets the number of tabs that should be rendered before additional items are put in the more dropdown

Default value of this property is 5

3. URL
This URL fragment will be appended to the site URL when a tab is selected

Default value of this property is MyInfo.aspx (_layouts/MyInfo.aspx).

I have used “Site Content and Structure” page (_layouts/sitemanager.aspx) page. This will help managers to easily navigate and review “Pending Approvals” or other task of all sites from a same page.

Add the “Site Aggregator” to your page and set the Target Audience property to Managers or the respective approver group, so that only managers/approvers can see this web part.

Use “New Site Tab” from Sites menu to create a new Site Tab.

Set the URL property to “_layouts/sitemanager.aspx”. See the below image for the properties of Site Aggregator.

After adding all the sites, select the “Pending Approval” view to see all the approvals which are pending for the selected site.

Managers / Approvers can manage all approvals or view other details in same page.