ADF DVT NBox visualisation component in ADF 11.1.1.9

With the arrival of ADF 11.1.1.9 a new visualisation component is included. The NBox.

"The ADF NBox is an interactive data visualization tool that allows users to view data displayed in a grid across two dimensions, each dimension representing a range of data. Customizable nodes representing data items are displayed in the cells formed by the intersection of the two dimensions." (Source: Oracle Documentation)

I never heard of the NBox before so I had to give it a try. I am quite impressive so far! Take a look

Use Case Description

In my sample for the NBox component I would like to display Employees on the dimensions „Origin“ (Country) and „Income“ (Salary).

How To

Step 1: Create a Read-Only ViewObject on the HR.EMP_DETAILS_VIEW Database View. That View includes all needed data for the use case. Nothing special here. So I am not going into details.

Step 2: Create a transient attribute to calculate the salaryLevel (lower, middle, upper - so that’s just my simple idea to divide Employees into 3 Salary-Groups so to say). I am doing this by a groovy expression: "Salary < 5000.0 ? 'lower' : (Salary < 10000.0 ? 'middle' : 'upper‘)"

Step 3: Create transient attribute to calculate an CountryDiscriminator. My idea here is to categorize every employee by the following Country-groups: US, UK and „Others“. To achieve that I am using the following groovy expression: "CountryId in ['US', 'UK']?CountryId:’OTHER'"

That’s all you need on the model side. The rest is done on the UI Layer.

Step 4: Open the „Data Controls“ palette and drag&drop the Collection „EmpDetailsView1“ onto the view (JSPX). Choose NBox from contextual menu.

Dialog opens to configure the Rows und Columns. Enter the column und row numbers, assign values and labels. In this example there are exactly 3 rows and 3 columns. The values should exactly match your values from the transient attributes.

Click: Next

The NBoxes nodes are going to be „Employee Names“ Each node will be stamped by the SalaryLevel (for income dimension) and CountryDiscriminator (for origin dimension)

In the Node-tab define the grouping by „JobTitle“. Choose color as Node classifier.

Click Tab: Indicator
Define the grouping by ‚DepartmentId“. Choose „Shape“ as indicator. (color is already used for the Job title classification)

Click: Finish-Button

The generated JSPX code will look like the following snippet. The data is bound against a tree binding.

Conclusion

The NBox component is quite rich. With some basic understanding it is very easy to transform data into meaningful and easy to read information! Beyond the given use case there are a lot more ways to visualize data. It’s worth to take a look into the documentation. Have fun!

Download Sourcecode

https://github.com/enpit/enpit.sample.adf.nbox

Further Information

From ADF Web UI Guide 11.1.1.9
- 23.2.3 NBox Use  Cases and Examples
- 26  Using NBox Components

From ADF Fusion Developer Guide 11.1.1.9
-  26.5 Creating Databound NBoxes

Issues

(1) As you can see from the screenshot of the „Create NBox“ dialog the „Next“-Button is disabled although everything required is filled in. The Button gets enabled once you click in some of the cells.
(2) In the second step of the „Create NBox“ sample the „Back“-Button is disabled although there is no reason. Workaround: fill in both required fields Row/ Column. Then the Back-Button gets enabled.