ADF Faces – Nested Columns

2

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:

   &lt;af:column&gt;<br />     &lt;f:facet name=&quot;header&quot;&gt;<br />         &lt;af:outputText value=&quot;Employee&quot;/&gt;<br />     &lt;/f:facet&gt;<br />     ...<br />     &lt;af:column &gt;<br />       &lt;f:facet name=&quot;header&quot;&gt;<br />         &lt;af:outputText value=&quot;Contact&quot;/&gt;<br />       &lt;/f:facet&gt;<br />       &lt;af:column &gt;<br />         &lt;f:facet name=&quot;header&quot;&gt;<br />           &lt;af:outputLabel value=&quot;Email&quot;/&gt;<br />         &lt;/f:facet&gt;<br />         ...<br />       &lt;/af:column&gt;<br />       &lt;af:column &gt;<br />         &lt;f:facet name=&quot;header&quot;&gt;<br />           &lt;af:outputLabel value=&quot;PhoneNumber&quot;/&gt;<br />         &lt;/f:facet&gt;<br />         ...<br />       &lt;/af:column&gt;<br />     &lt;/af:column&gt;<br />     ... <br />

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

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

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.

 

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

2 Comments

  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