Drill Down Graph

It has been long time since our last post. Fortunately we have been quite busy. For this post, we have decided to show you how to implement a “drillable” graph.

Although documentation is out there, we couldn’t find a proper tutorial for this task, which mean that it could possible save you some time doing the proper research.

Key Fact: At difference of what you might have originally thought, the drillable functionality doesn’t depend on Master-Detail relationships between view objects (when your model is using ADF BC). Instead, it will look into one viewObject and from there, the functionality is implemented by the graph component according to the bindings definition configuration.

Key Fact #2: Don’t try to implement this solution using, for example, a PieChart graph. It won’t work. We are not sure why it won’t work so hopefully someone that reads this article will help us and point us to the answer.

We will explain you step by step so you can actually understand what is going on rather than just copying and pasting some random code into your application. Example will be based on Departments and Employees from HR Schema.

We are using JDeveloper 12.c but this should work in previous version as well. Please let know if it does not. So lets start by dragging and dropping the EmployeesVO from the DataControl into our page and selecting as the Bars type.

Now we logically want the bars to represent the salary and the department to be shown in the X axis:

If we run the application now, this is what we are going to get. It is basically all salaries for employees in all the departments:

Having a look to the page definition we see the following:

Now, we want to group by departments (agregateDuplicates) and we want the salary to be SUMMED (defaultAgregateType)

After we apply the changes and we re run the application, we can see now that salaries are summed and grouped by departments

Now, we want to drill down by department. So for this, we need to go again to the graph’s page definition and specify how the hierarchy is supposed to work. We need to specify what is the drillable item (item) and what are we going to show after the drill is done (child). Also, we need to tell that the graph will be replace when drilling.

And last thing to do is to indicate that the graph is drillingEnabled.

After all is done, this is what we get by running the application:

If we select department 80 we drill down:

Great! Now, what can we do to improve the presentation and the user experience? Two things:

1.- Show a multicolored graph rather than just one colour for the bars. Simple, just go to the page definition file (not the source code) and edit the graph, click Swap Bars With  and save your change.

After running the application you will see:

Drilling down:

2.- As you can imagine, displaying the DeparmentId  is not a real use case. So in order to show the department name you could do the following. You need to create a ViewCriteria for DepartmentVO based on DepartmentId.

Now, you need to add a view accessor to DepartmentsVO in the EmployeesVO. You can rename it EmpDepartment for example.

Edit it and apply the ViewCriteria and add the binding variable value to be DepartmentId.

Add the transient attribute DepartmentName and base it on a groovy expression as follows:

In the view controller project, go to the source code of the graph’s page definition and replace DepartmentId with DepartmentName.

This should be enough. Run your application and you are done:

We are currently working into an alternative way to ‘drillDown’ graphs. This approach won’t be using standard graph functionality but taskflow navigation instead.

How to hide adf tree leaf node icons

If you are working with Oracle ADF, you must have a menu with af:tree component here or there. i also used af:tree as main menu, but there was this annoying expand icon for leaf nodes. i googled it for a while and searched in forums, nothing has appeared. so i solved this with kind of tricky solution.

this is how a recursive af:tree looks like with expand icons on leaf nodes:

as you see, we can’t figure out which one is leaf node that has no child. you should try to expand to see if there are child nodes:

and here is tricky part. we need a 10px * 10px white spacer image and some inline styling in af:tree nodeStamp facet. initial facet code is:

<f:facet name="nodeStamp">
  <af:outputText value="#{node}" id="ot1"/>
</f:facet>

then i added af:image and css positioning. but most important part is rendered attribute.

<f:facet name="nodeStamp">
  <af:group id="g1">
    <af:image id="i1" source="/i/spacer.png" rendered="#{node.children == null}"
              inlineStyle="position: absolute; margin-left:-17px;
                           border: 2px solid white; width: 15px; height: 10px;"/>
    <af:outputText value="#{node}" id="ot1"/>
  </af:group>
</f:facet>

i added red border styling to make easy to see where spacer image is located and how it covers expand icon.

this tricky solution has challenges like adf skinning. i am using blafplus-rich skin family and white spacer is suitable for me. if you have another skin, you may need different image or css styling.