ADF UI- Using New DVT Component Tag Cloud in ADF 12.2.1.1

In new relaese of Jdeveloper and ADF 12.2.1.1 many new data visualization components are introduced

Here I am talking about <dvt:tagCloud> , this component is used to represent textual data in form of tags. You must have seen tag cloud on many websites to show popular tags or patterns

So now with help of this Tag Cloud component we can create and show same type of UI. In this post I am showing how can we use tag cloud component in our ADF Application


For this tutorial first you have to download and install new version of Jdeveloper - Download Jdeveloper 12.2.1.1

In this post I am using Employees table of HR Schema , Prepare Model using Employee table

Create a page in viewController and drop Employees viewObject on page from data control

Select Tag Cloud from list and click ok , Configure Tag Cloud and click Ok, At first I am not using grouping

Now run and see how simple tag cloud looks, Size of text depends on Relative Size attribute

It's looking good , Now I'll apply grouping in this (DepartmentId is used to group Employees)
Edit Tag Cloud bindngs and apply grouping as per below snap

After applying grouping you can see that cloud is colored for separate groups

We can show a legend under tag cloud using attributes groups, Copy dvt:attibuteGroups ID in LegendSource property of dvt:tagCloud

tagCloud component supports two type of layout

1. Rectangle (Default)
2. Cloud

See XML Source of dvt:tagCloud (some properties changed, cloud layout is used)

<dvt:tagCloud id="tc1" var="ent" value="#{bindings.Employees1.collectionModel}"
                              inlineStyle="height:400px; width:500px;" layout="cloud" selectionMode="single"
                              legendSource="ag1">
                    <dvt:tagCloudItem label="#{ent.FirstName}" id="tci1" value="#{ent.Salary}"
                                      shortDesc="Salary #{ent.Salary}">
                        <dvt:attributeGroups value="#{ent.DepartmentId}" type="color" label="#{ent.DepartmentId}"
                                             id="ag1"/>
                    </dvt:tagCloudItem>
                </dvt:tagCloud>

To enable hideAndShowBehavior of legends in cloud set hideAndShowBehavior="hide"
Click on legends to hide and show Employees for that Department

This is how we can use tag cloud in ADF Application 
Sample ADF Application -Download

Cheers :) Happy Learning