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

Sharing is Caring

In the new release of JDeveloper and ADF 12.2.1.1, many new data visualization components are introduced and Tag Cloud in ADF is one of them.

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

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


For this tutorial first, you have to download and install a 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 the page from the data control

Select Tag Cloud from the 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 the 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 bindings 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

the tagCloud component supports two types 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

Tag Cloud in ADF


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

Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “ADF UI- Using New DVT Component Tag Cloud in ADF 12.2.1.1”

Leave a Reply

Your email address will not be published. Required fields are marked *