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

<dvt:sunburst> is one of 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 type of animations that makes a better UI
See What docs says -

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






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




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