ADF Faces – Nested Columns

Lucas Jellema 2
0 0
Read Time:4 Minute, 13 Second

Recently I ran into a requirement on an ADF project to present columns in an ADF Faces table component in a clustered (nested) fashion. Out of 12 columns, one group of three columns and another group of four columns formed clusters – columns that together had something in common. And this clustering, column grouping or common-ness should be visualized in the table. For example by giving these groups of three and four columns a common header and visual indication using borders, in addition to their individual header and demarcation.

My first reaction was that it could be done or not in a very simple way. Boy, was I wrong! Yesterday I went through the ADF Faces documentation on Tables and Columns, and I quickly ran into a section on nested columns: "af:column  tags can be nested to produce groups of columns. The header of a column group spans across all the columns it contains. " There it was, exactly what I needed in the easiest way one can imagine!

and this table with nested columns was created from:....

 

Nesting several columns into one cluster with a joint header – as for example was done with Email and Phone Number inside Contact – is very easily achieved by nesting the af:column element for Email and Phone Number inside a new af:column element Contact. In stripped code that looks like:

   <af:column>
<f:facet name="header">
<af:outputText value="Employee"/>
</f:facet>
...
<af:column >
<f:facet name="header">
<af:outputText value="Contact"/>
</f:facet>
<af:column >
<f:facet name="header">
<af:outputLabel value="Email"/>
</f:facet>
...
</af:column>
<af:column >
<f:facet name="header">
<af:outputLabel value="PhoneNumber"/>
</f:facet>
...
</af:column>
</af:column>
...

The overall nested column structure presented in this page – stripped of the actual column contents – now looks like this:

 <af:table id="AllocationsTable" 
<af:column ...>
<f:facet name="header">
<af:outputLabel value="Id" />
</f:facet>
...
</af:column>
<af:column>
<f:facet name="header">
<af:outputText value="Employee"/>
</f:facet>
<af:column ... >
<f:facet name="header">
<af:outputLabel value="EmpId"/>
</f:facet>
</af:column>
<af:column ...>
<f:facet name="header">
<af:outputLabel value="FirstName"/>
</f:facet>
...
</af:column>
<af:column >
<f:facet name="header">
<af:outputLabel value="LastName"/>
</f:facet>
...
</af:column>
<af:column >
<f:facet name="header">
<af:outputText value="Contact"/>
</f:facet>
<af:column >
<f:facet name="header">
<af:outputLabel value="Email"/>
</f:facet>
...
</af:column>
<af:column >
<f:facet name="header">
<af:outputLabel value="PhoneNumber"/>
</f:facet>
...
</af:column>
</af:column>
<af:column ... >
<f:facet name="header">
<af:outputLabel value="HireDate"/>
</f:facet>
...
</af:column>
<af:column id="EmployeeCurrent">
<f:facet name="header">
<af:outputText value="Current Position"/>
</f:facet>
<af:column ...><f:facet name="header"><af:outputLabel value="JobId"/></f:facet>...</af:column>
<af:column ...><f:facet name="header"><af:outputLabel value="Salary" /></f:facet>...</af:column>
<af:column ...><f:facet name="header"><af:outputLabel value="DepartmentId"/></f:facet>...</af:column>
</af:column>
</af:column>
<af:column id="Allocation">
<f:facet name="header">
<af:outputText value="Allocation"/>
</f:facet>
...
</af:column>
...
</af:table>
 

As you can see, creating clustered, nested columns – down to several levels – is an easy thing to do.

Note that when rendering, ADF Faces does not produce COLGROUP or COL elements, as I had expected and hoped for, but instead creates regular TR, TH and TD elements. Every additional level of column nesting results in an additional TR element – with the non-nested columns getting an increase in their ROWSPAN attribute.

 

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

2 thoughts on “ADF Faces – Nested Columns

  1. Hi Lucas,

    Great tip, very useful for me as most of my apps are weby like.
    Could you point me to the documentation where you find “af:column tags can be nested to produce groups of columns. The header of a column group spans across all the columns it contains. ”

    thanks,

    Branislav

Comments are closed.

Next Post

ADF Faces - Server Side (partial page rendering) Column Hide and Seek - Expanding/Collapsing Columns in Table

Tables are probably the most important ADF Faces component to present data to the end user. A table can present a huge amount of data at once, both in terms of rows and columns. This of course can be overwhelming. Frequently, only some of the columns – some of the […]
%d bloggers like this: