VisualForce Tag Cloud Component

by
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

[code language=”xml”]
<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>
[/code]

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.

2 thoughts on “VisualForce Tag Cloud Component”

  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!

    Reply

    • 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 🙂

      Reply

Leave a Comment