Having the end-user hide and display columns in a JSF Table Component

Yesterday I was discussing the migration of a Web PL/SQL based application to the Oracle ADF Technology Stack, most particularly to Java Server Faces. One interesting feature the customer would like to add to the application sometime during the migration was the ability for end-users to turn on and off the columns in a table component. The need for this feature was fairly obvious: some of the records presented in tables had over 30 or more columns and these could clearly not all be shown at the same time. However, the requirements as to which column should be visible were very different for different users at various times. So rather than pre-program the columns to be displayed in the table layout – and presenting the others in a table overflow area or a form layout detail-page, the customer preferred to leave this decision up to the end user, at run time.

My initial thought was: nice challenge, a real nut to crack. However, when I sat down to actually do it, I was a little disappointed: it was very easy! Not something to boast about at the Friday afternoon party at Cafe@AMIS – our company bar. However, since the result is quite nice, I will tell you how to do it anyway. Note: the next challenge would be ‘how to allow the end user to rearrange the columns’. A little tougher but probably not too much of a problem either.

The intended functionality is that the user can check the checkboxes in the panelbox on the right to switch on or off additional columns. For example:

It turns out to be quite simple to implement this functionality. The starting point for my How To is shown below:

This result could have been arrived at my diligent manual programming, JDeveloper IDE supported Drag & Drop, JHeadstart powered generation or any other means you can think of.

What I am trying to achieve now, is that a number of the columns currently shown in this table – Hiredate, Salary, Commission and Manager – are only shown if the user so desires. So I want to give the end user control over part of the content structure of the page.

Note: the example is described in terms of ADF Faces aka Apache MyFaces Trinidad, Oracle’s JSF implementation, but should be applicable to any JSF Table Component implementation.

Steps to implement

The key to this functionality is the fact that each Column inside the Table Component has a rendered property. This property can be fixed – which would be a little unusual if the fixed value differs from true – or it can be set dynamically through an EL expression. So what we need to do is link the rendered property of the four columns we want to give the end user control over, to  components – for example check boxes – the end user can manipulate.
 

1. Create Checkboxes for the end-user to switch on or off the columns

The first step to take is to provide a UI element to the end user that can be used to switch on or off columns. What I have done in this particular example is wrap the table component in a panelHorizontal component. To the panelHorizontal, I have added a spacer and a panelBox. Inside the panelBox is a selectManyCheckbox component, with checkboxes for each of the columns to be manipulated. Note that in this example, the names of the columns are hard-coded into the selectManyCheckbox component. To make this solution for dynamic and more generic, these values would typically be provided by a backing bean instead.

</af:table>
  <af:objectSpacer width="20"/>
  <af:panelBox>
    <af:outputLabel for="cols"
                    value="Check the Columns to display"/>
    <af:selectManyCheckbox value="#{tableBean.columns}"
                           tip="The columns to be displayed in the table"
                           layout="vertical" autoSubmit="true"
                           id="colsMonitor">
      <af:selectItem label="Hiredate" value="hd"/>
      <af:selectItem label="Salary" value="sal"/>
      <af:selectItem label="Commission" value="com"/>
      <af:selectItem label="Manager" value="mgr"/>
    </af:selectManyCheckbox>
  </af:panelBox>
</af:panelHorizontal>
 

2.  Create the backing bean tableBean to hold the values of the selected checkboxes

The value property of the selectManyCheckbox component is bound to the columns property of a managed bean called tableBean. We need to define this bean in the faces-config.xml file as well as code its implementation.

The entry in the faces-config.xml looks as follows – where I initialize the selection of columns to be displayed (and the checkboxes to be checked) to Hiredate and Salary:

<managed-bean>
  <managed-bean-name>tableBean</managed-bean-name>
  <managed-bean-class>nl.amis.view.TableBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
  <managed-property>
    <property-name>columns</property-name>
    <list-entries>
      <value>sal</value>
      <value>hd</value>
    </list-entries>
  </managed-property>
</managed-bean>
 

The implementation of TableBean itself is straightforward and very generic: no reference to Employees and the columns in the table component of this example are used at all.

package nl.amis.view;

import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;

public class TableBean {
    public TableBean() {
    }

    String[] columns;
    Map colMap = new HashMap();


    public void setColumns(String[] columns) {
        this.columns = columns;
        colMap.clear();
        for (int i = 0; i < columns.length; i++) {
            colMap.put(columns[i], Boolean.TRUE);
        }
    }

    public String[] getColumns() {
        return columns;
    }

    public Map getColumnsMap() {
        return colMap;
    }
}
 

3. Link the Column’s rendered property to the corresponding checkbox 

Finally we need to tie the checkbox representing the column and specifically its whereabouts to the column itself. The rendered property governs whether or not a column is displayed. So that is the property we need to tie to the relevant checkbox . One fairly easy way of doing this – hence the use of the getColumnsMaps() method in the TableBean – is through a Map. We can now use expressions such as the following:

 <af:column sortable="true" noWrap="true" sortProperty="Comm"
            formatType="number"
            rendered="#{tableBean.columnsMap['com']==true}"> 

For each of the four columns we set the rendered property like this, using hd, sal and mgr as
the map keys, corresponding to the valu
es assigned to the checkboxes in the selectManyCheckbox component.

4. AJAX enable the End User’s Column Control to refresh (only) the table immediately

The last step for a true modern, rich client implementation has us AJAX enable the hide/show of columns. Note: this step is not JSF generic but ADF Faces specific. We need to do two things:

a.  The selectManyCheckbox component must always immediately submit any change in its settings to the server (in an asynchronous call). All we need to do for that to happen, is set the autoSubmit property of this component to true:

<af:selectManyCheckbox value="#{tableBean.columns}"
                       tip="The columns to be displayed in the table"
                       layout="vertical" autoSubmit="true"
                       id="colsMonitor">
 

b. We need to have the table component refreshed when the asynchronous request-response cycle initiated by the selectManyCheckbox colsMonitor completes by processing the response in the client. This is equally simple: we need to include the id of the selectManyCheckbox – colsMonitor – in the partialTriggers property of the table component. That is all to get AJAX rocking our application. Boy, are we hip or what?

<af:table id="EmpTableTable" value="#{EmpTableCollectionModel}"
          selectionState="#{EmpTableCollectionModel.selectedRow}"
          selectionListener="#{EmpTableCollectionModel.makeCurrent}"
          disclosureListener="#{EmpTableCollectionModel.hideAllDetails}"
          var="row" rows="#{bindings.EmpTableTable.rangeSize}"
          first="#{bindings.EmpTableTable.rangeStart}"
          emptyText="#{bindings.EmpTableTable.viewable ? 'No rows yet.' : 'Access Denied.'}"
          binding="#{EmpTableCollectionModel.table}"
          partialTriggers="colsMonitor">