Tag Cloud Widget
The Tag Cloud widget provides a way for you to visualize tag usage. The more a tag is used, the larger it appears in the cloud. The Tag Cloud widget does not perform the usage calculation; tag usage is calculated on the server. To be effective, the Tag Cloud requires a two-column data set ['tag label', 'tag count']. Based on the tag counts, tag labels will be rendered accordingly.
The Tag Cloud provides the following options:
• You can apply a fixed style to the rendered tags (for example, display all the tags in red, italics) or base their styling on a state definition.
• You can apply a style to the clicked/selected tag.
• You can use a bindable click event. When a user clicks a tag or when the data set's selected row is updated, a Click event is broadcast.
• When a user clicks a tag or when the data set's selected row is updated, the tag cloud populates the bindable SelectedTag property with the matching tag.
• You can specify how large (in CSS em length) the most used tag is rendered.
• You can display a tool tip for each tag based on any column in the tag cloud data set.
• The Tag Cloud inherently listens to the Selected Row(s) update event of the data set to which it is bound. Therefore, the SelectedTag property can update and re-render (if SelectedTagStyle is defined) without explicit action within the Tag Cloud.
Properties
For information about common widget properties, see Widgets. Properties that are specific to the Tag Cloud widget are described in the table below.
|
Property Name
|
Description
|
Base Type
|
Default Value
|
Bindable? (Y/N)
|
Localizable? (Y/N)
|
|---|---|---|---|---|---|
|
CustomClass
|
User defined CSS class to apply to the top div of the widget. Multiple classes can be entered, separated by a space.
|
STRING
|
n/a
|
Y
|
N
|
|
Data
|
Tag data bound to widget
|
INFOTABLE
|
n/a
|
Y
|
N
|
|
MaxFontSize
|
Size of the largest tag in the cloud (in CSS em length). Scales down all other tags from this size.
|
NUMBER
|
4
|
N
|
N
|
|
DisplayToolTip
|
Enables the display of a tool tip over each tag link
|
BOOLEAN
|
false
|
N
|
N
|
|
ToolTipField
|
The infotable field that represents the tool tip value if DisplayToolTip is selected/true. Requires the Data property to be bound.
|
FIELDNAME
|
count
|
N
|
N
|
|
TagStateStyle
|
Sets the style of the rendered tags based on a formatted state or specified style.
By default, the Tag Cloud styles the tag links based on their count (the higher the count, the larger the font). You can apply a style to the tag links based on another data value for each tag (state formatting) or apply a style across all tags. For example, a State Formatter is applied to the tag cloud data to format links with counts greater than 40 to red and bold, while links with counts less than 40 are black and italic.
|
STATEFORMATTING
|
n/a
|
N
|
N
|
|
TagNameField
|
The infotable field that represents the tag value. Requires the Data property to be bound.
|
FIELDNAME
|
n/a
|
N
|
N
|
|
TagCountField
|
The infotable field which represents the tag count. Requires the Data property to be bound.
|
FIELDNAME
|
n/a
|
N
|
N
|
|
Title
|
Title for the tag cloud
|
STRING
|
n/a
|
Y
|
Y
|
Events
DoubleClicked
• Is bindable
• When a tag is single clicked, the SelectedTag can be detected from the Data Service Selected Row. The DoubleClicked event can be used to fire another service, such as linking a double click to trigger a navigation link.
• If the SelectedTagStyle property is defined, the clicked tag will be styled accordingly on selection. Any previously clicked/styled tag will be reset.
• The Selected Row object of the bound data is updated with the index of the currently selected/clicked Tag cloud link.
Inherently, the Tag Cloud listens to the Selected Row object update for the data to which it is bound. When Selected Row is updated (by another widget or data action):
• The Tag Cloud SelectedTag is set to the Selected Row data value designated by the Tag Cloud TagNameField.
• If the SelectedTagStyle property is defined, the SelectedRow tag will be styled accordingly. Any previously clicked/styled tag will be reset.
• If the updated Selected Row is a value not displayed by the Tag Cloud:
Any previously clicked/styled tag will be reset.
The SelectedTag will be cleared.
• The Tag Cloud does not support multi-selection. When processing updates from the Selected Row object, only the first index of the Selected Row object will be handled.