The Silver Lining

Lessons & Learnings from a salesforce certified technical architect.

VisualForce Tag Cloud Component

with 2 comments

Tag clouds are nothing new on the interwebs, but there is some debate as to which sort of implementation is best. In this debate I prefer the simplest solution [insert further debate as to the definition of ‘simplest’ here] which I propose to be a simple unordered HTML list with some CSS styling.

Furthermore, wouldn’t it be great if this solution were dynamic, thus enabling you to create tag clouds specific to a particular application context?. Rhetorical question, of course it would be. To this end I’ve created a component that utilises a controller, mostly dynamic in nature.

To start with, let’s have a look at the component code

<apex:component controller="TagCloudController">
	<apex:attribute name="objectName" assignTo="{!objectName}" type="String" Default="SkillCandidate__c" Description="name of the object" required="true"/>
	<apex:attribute name="objectField" assignTo="{!objectField}" type="String" Default="name" Description="name of the object field that you want to use in the tag cloud" required="true"/>
	<apex:attribute name="width" type="String" description="The width of the tag cloud as a % or px" default="39%"/>
	<apex:attribute name="float" type="String" description="Which direction to float the component" default="right"/>
	<style>
		.tagcloud{
			width: {!width};
			text-align: justify;
			float: {!float};
			padding: 10px 30px 10px 10px;
			margin: 0px;
		}
		.tagcloud li{
			display: inline;
			margin-left: 3px;
		}
		.size1{
			font-size:8px;
		}
		.size2{
			font-size:12px;
		}
		.size3{
			font-size:18px;
		}
		.size4{
			font-size:28px;
		}
		.size5{
			font-size:39px;
		}
		.tagcloud SPAN { position: absolute; left: -999px; width: 990px; }
	</style>
	<h2>Tag Cloud </h2>
	<ol>
		<apex:repeat value="{!tags}" var="tag">
			<li><a href="{!$Page.SomePageName}?object={!objectLabel}&keywords={!tag.encodedName}">{!tag.name}</a></li>
		</apex:repeat>
	</ol>
</apex:component>
The controller itself is quite basic. It simply uses an internal class to represent a tag, and various methods for returning the tag class properties. If anyone needs specifics I’ll gladly respond to any email requests.
Advertisements

Written by Wes

June 9, 2009 at 5:33 pm

2 Responses

Subscribe to comments with RSS.

  1. any way you could share your controller code on this? Im trying to do the same thing but I cant seem to stop punching myself in the face with my keyboard… which isnt helping me by the way… Thanks!

    Charles Rowland

    August 4, 2010 at 7:57 pm

    • I don’t have access to this code anymore, and I think I’d probably do it differently now. If you post your issue to the developer forums and link back here I’ll have a look at it for you 🙂

      Wes

      August 5, 2010 at 10:03 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: