Tag Archives: sharepoint blogs

Cumulus Tag Cloud for SharePoint

In this article we will see how we can develop a Tag Cloud WebPart for SharePoint Blogs. I have named this WebPart Cumulus Tag Cloud because this Tag Cloud is inspired from one of the most popular Tag Cloud for WordPress called WP Cumulus.

We will not be going into basics about how to develop a WebPart. If you are new to Visual Studio 2010 WebPart development, check my previous post Twitter Trends Webpart for SharePoint.

Below is a screenshot of how our TagCloud will look like in a SharePoint Blog.

Let’s get started!

As a First Step goto WP Cumulus Tag Cloud homepage and download the PHP plugin and unzip the files to a folder. We will be needing the tagcloud.swf file for our webpart.  Open Visual Studio 2010 and Create a new Visual Web.

Add tagcloud.swf to the Layouts Folder and by this time your Solution explorer should look like this

Open VisualWebpart1.cs and change

[sourcecode language="csharp"]

[ToolboxItemAttribute(false)] to [ToolboxItemAttribute(true)]

[/sourcecode]

Add the below code which will add all necessary Texboxes for our custom WebPart properties.

[sourcecode language="csharp"]

//Color of the Tags
public static string tagsURL = “”;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User), WebDisplayName("Tags URL"), WebDescription("Enter the URL for the list which contains the Tags.")]
public string CumulusTagCloudURL
{
get { return tagsURL; }
set {
//Validate the URL
using (SPSite listSite = new SPSite(value))
{
if (listSite == null)
{
throw new Microsoft.SharePoint.WebPartPages.WebPartPageUserException(“Unable to Locate the site”);
}

using (SPWeb ListWeb = listSite.OpenWeb())
{
if (ListWeb == null)
{
throw new Microsoft.SharePoint.WebPartPages.WebPartPageUserException(“Unable to open Web”);
}

SPList CategoriesList = ListWeb.GetList(value);
if (CategoriesList == null)
{
throw new Microsoft.SharePoint.WebPartPages.WebPartPageUserException(“Unable to find List”);
}
}
}

tagsURL = value; }
}

//Flash Height
public static int flashHeight = 200;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User),WebDisplayName("Height"), WebDescription("Height of the Flash Tag Cloud")]
public int CumulusTagCloudHeight
{
get { return flashHeight; }
set { flashHeight = value; }
}

//Flash Width
public static int flashWidth  = 260;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User),  WebDisplayName("Width"), WebDescription("Widhth of the Tag CLoud")]
public int CumulusTagCloudWidth
{
get { return flashWidth; }
set { flashWidth = value; }
}

//Color of the Tags
public static string tagColor = “ffffff”;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User),  WebDisplayName("Color of the Tags"), WebDescription("These should be 6 character hex color values without the # prefix (000000 for black, ffffff for white)")]
public string CumulusTagCloudColor
{
get { return tagColor; }
set { tagColor = value; }
}

//Highlight color of the Tags
public static string tagHColor = “000000″;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User), WebDisplayName("Highlight color of the Tags"), WebDescription("These should be 6 character hex color values without the # prefix (000000 for black, ffffff for white)")]
public string CumulusTagCloudHColor
{
get { return tagHColor; }
set { tagHColor = value; }
}

//Background Color
public static string backgroundColor = “333333″;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User),  WebDisplayName("Background Color"), WebDescription("6 character hex color value")]
public string CumulusTagCloudBackColor
{
get {  return backgroundColor; }
set { backgroundColor = value; }
}

//Rotation Speed
public static int rotationSpeed = 100;
[WebBrowsable(true), Category("Cumulus Tag Cloud"), Personalizable(PersonalizationScope.User), WebDisplayName("Rotation speed"), WebDescription("Speed (percentage, default is 100)")]
public int CumulusTagCloudRotationSpeed
{
get { return rotationSpeed; }
set { rotationSpeed = value; }
}

[/sourcecode]

And this is how WebPart properties page look like

Open the code behind file of your user control and add the following code

[sourcecode language="csharp"]

string listURL = VisualWebPart1.tagsURL;
string tagColor = VisualWebPart1.tagColor;
string tagHColor = VisualWebPart1.tagHColor;
string backgroundColor = VisualWebPart1.backgroundColor;
int rotationSpeed = VisualWebPart1.rotationSpeed;
int height = VisualWebPart1.flashHeight;
int width = VisualWebPart1.flashWidth;

if (listURL == “”)
{
lblMessage.Text = “Edit your WebPart Properties to start using Cumulus Tag Cloud”;
return;
}

TagCloud.InnerHtml = ““;

using (SPSite listSite = new SPSite(listURL))
{
if (listSite == null)
{
throw new SPException(“Unable to Locate the site”);
}

using (SPWeb ListWeb = listSite.OpenWeb())
{
if (ListWeb == null)
{
throw new SPException(“Unable to open Web”);
}

SPList CategoriesList = ListWeb.GetList(listURL);
if (CategoriesList == null)
{
throw new SPException(“Unable to find List”);
}
else
{

SPListItemCollection categories = CategoriesList.GetItems();

foreach (SPListItem category in categories)
{
TagCloud.InnerHtml = TagCloud.InnerHtml + “” + category.Title + ““;

}

}

}

}

TagCloud.InnerHtml = TagCloud.InnerHtml + “\” quality=’high’ src=’/_layouts/Cumulus Tag Cloud/tagcloud.swf’ type=’application/x-shockwave-flash’>”;

[/sourcecode]

Add the below code to your user control

[sourcecode language="csharp"]

[/sourcecode]

That’s it.

You can download the WSP file or the Source from the codeplex homepage of Cumulus Tag Cloud

Recent Posts Webpart [Download]

In this article we will see how we can develop a webpart which will display the latest posts from different blogs. This was easily achievable using a Content Query WebPart but there are few issues. one of them was the non availability of options like choosing blogs.

Only option available was to create a new custom WebPart. It was easy as I expected. you can scroll down to download the webpart.

Recent Posts Webpart

Recent posts WebPart Toolpane


Download WebPart | SourCode