ADF Table – Toggle for Show All/Show First Batch – interaction designer taking over

ADF applications are fun to develop. And some challenges make it even more fun. Our challenge is our Interaction Designer who, together with the end user board, comes up with special requirements for the look and feel of the ADF Faces application. One of the requirements is seen in the screenshot below: the hyperlink toggle to switch between the first batch of employees or all of them. The number of records shown in the first batch is set as a user preference.

When the toggle is activated, all (5) employees are shown and the toggle changes into the ‘ Look at the first batch of Employees’:

In this article we will discuss how to implement this fairly simple functionality. The steps are simple:

• create a class used as managed bean to hold the current setting for the table
• add two command links to the panelGroup or whatever container is holding the table – making only one of them render depending on the toggle’s status
• associate the rows attribute of the af:table component with the managed bean’s tableRangeSize

Creating the TableRangeSizeManager class

public class TableRangeSizesManager extends HashMap implements Map  {
    public TableRangeSizesManager() {
    }


    public Object get(Object key) {
        if (super.containsKey(key))
          return super.get(key);
        else {
          Long tableRangeSize= new Long(3); // in the real application, this value is read from the user preferences
          super.put(key, tableRangeSize);
          return tableRangeSize;
        }        
    }
}
 

Configuring the TableRangeSizeManager managed bean

Add the following snippet to the faces-config.xml file 

  <managed-bean>
    <managed-bean-name>tableRangeSizeManager</managed-bean-name>
    <managed-bean-class>nl.amis.view.TableRangeSizeManager</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>
 

Add the CommandLinks to the Table’s Container

   <af:commandLink id="ShowAllEmpInDept"
                   text="#{nls['LOOK_AT_ALL']} #{bindings.EmpInDeptTable.estimatedRowCount} Employees"
                   rendered="#{tableRangeSizesManager.EmpInDept!=-1}">
     <af:setActionListener from="#{-1}"
                           to="#{tableRangeSizesManager.EmpInDept}"/>
   </af:commandLink>
   <af:commandLink id="FirstBatchEmpInDept"
                   text="#{nls['LOOK_AT_FIRST_BATCH']} #{preferenceManager.preferences.MAX_RECORDS_IN_TABLE} Employees"
                   rendered="#{tableRangeSizesManager.EmpInDept==-1}">
     <af:setActionListener from="#{preferenceManager.preferences.MAX_RECORDS_IN_TABLE}"
                           to="#{tableRangeSizesManager.EmpInDept}"/>
   </af:commandLink>

The preferenceManager returns a Map called preferences which contains the MAX_RECORDS_IN_TABLE preference – in this case with just the value 3.

Only one of these two commandLinks will be shown at any one time. Either the value tableRangeSizeManager returns -1 – in which case all Employees are shown and the toggle "show the first batch" is displayed- or it returns something else, in which case only the first batch of records is displayed and the toggle "show all employees" is visible. The nls managed bean is a reference to the ResourceBundle that returns the string for the keys LOOK_AT_FIRST_BATCH or LOOK_AT_ALL.

Associate the table rows attribute with the managed bean

Now we have the managed bean in place as well as the command links to toggle the setting for the table range size, it’s time to associate the rows attribute with the actual value returned for this table by the TableRangeSizeManager:

rows="#{tableRangeSizesManager.EmpInDept}" 

This refers to the EmpInDept key in the tableRangeSizeManager Map, as set by the toggle links – initially set to 3.