ADF UI: Using dvt:sunburst to show hierarchical data in ADF

Sharing is Caring

dvt:sunburst is one of the fancy components to show multi-level hierarchical data in form of circular rings in ADF application

It supports drilling up to n-level, consist of dvt:sunburstNode as it’s child tag to show level wise detail. Sunburst supports multiple types of animations that make a better UI
See What docs say –

Sunbursts are used to display hierarchical data across two dimensions, represented by the size and color of the sunburst nodes. The sunburst displays multiple levels of its hierarchy at once, with each ring corresponding to a level of the hierarchy

Here I am using Departments and Employees table of HR Schema to show 2-level of sunburst

    • Create a Fusion Web Application and prepare Model using Departments and Employees table

 

 

    • Create a view link between Departments and Employees viewObject using DepartmentId and add to Application Module

    • Create a page and open data control menu , drop Departments view object as sunburst on page

 

 

 

    • Configure sunburst to show Department and Employee detail

 

[amazon_link asins=’1849684820,8192910962,B07DD2GZGC,9385152149,B01N5KHFG9,B07KTBRG4M’ template=’ProductCarousel’ store=’ashhish000-21′ marketplace=’IN’ link_id=’b8ef1500-09a9-11e9-a99c-c1e2146947f3′]

To enable single selection i have set nodeSelection to single and #{bindings.Departments1.treeModel.makeCurrent} in selectionListener (this will set selected node as current node and further we can get it programmatically)
See sunburst XML code –

<dvt:sunburst id="t1" value="#{bindings.Departments1.treeModel}" var="row"
                                  summary="Department-Employees"
                                  selectionListener="#{bindings.Departments1.treeModel.makeCurrent}"
                                  nodeSelection="single">
                        <af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
                            <f:facet name="Departments11">
                                <dvt:sunburstNode value="#{row.Salary}" label="#{row.FirstName}" id="sn1"
                                                  shortDesc="Salary- #{row.Salary}" fillColor="#ff7435"/>
                            </f:facet>
                            <f:facet name="Departments10">
                                <dvt:sunburstNode value="#{row.DepartmentId}" label="#{row.DepartmentName}" id="sn2"
                                                  shortDesc="Department Id- #{row.DepartmentId}" drilling="insert"
                                                  fillColor="#51a5ff"/>
                            </f:facet>
                        </af:switcher>
                    </dvt:sunburst>

 

    • Run and check application

 

dvt:sunburst

All good 🙂 Now we can see that when we select any node in sunburst it sets as current row in Department table, this happens due to selection listener property.

To get selected node in managed bean we can create custom selection listener for this sunburst same as this post Get selected slice of dvt:pieChart using custom selection listener in ADF 

Sample ADF Application (Jdev 12.1.3)- Download
Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “ADF UI: Using dvt:sunburst to show hierarchical data in ADF”

Leave a Reply

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