ADF UI - selectionListener example for single-select af:table

There are situations when we require to perform some action on selecting a row in a single-select table. For such cases, we need to remove the default selectionListener and specify our own selectionListener method from the backing bean and write our logic within the method.

The generated default selectionListener for the table would be like selectionListener="#{bindings.EmpDeptVO.collectionModel.makeCurrent}". This will actually make the selected row as current row. As we're removing the default selectionListener, we need to call the same default selection listener method in the custom selectionListener method. Then only we can get handle to the selected row.

Sample Use Case:
Suppose I have employees table and when I select a row in the table, immediately I need to show a popup with the selected employee name. Sample application can be downloaded from here.

Implementation Steps:
1. Drop the VO as a table in the jsf page. Remove the default selectionListener and specify your own backing bean method for the selectionListener.

 <af:table value="#{bindings.EmpDeptVO.collectionModel}" var="row"
                  rows="#{bindings.EmpDeptVO.rangeSize}"
                  emptyText="#{bindings.EmpDeptVO.viewable ? 'No data to display.' : 'Access Denied.'}"
                  fetchSize="#{bindings.EmpDeptVO.rangeSize}"
                  rowBandingInterval="0"
                  rowSelection="single" id="t1"
                  partialTriggers=":::qryId1 ::ctb1 ::commandToolbarButton1"
                  columnStretching="column:c1"
                  styleClass="AFStretchWidth" columnSelection="multiple"
                  first="0" contentDelivery="immediate" autoHeightRows="10"
                  binding="#{pageFlowScope.ExampleBean.searchResultsTable}"
                  selectionListener="#{pageFlowScope.ExampleBean.rowSelected}">

2. In the custom selectionListener method, call the default selectionListener method which will set the selected row as the current row. We can use ADFUtil.invokeEL() to invoke the same default EL expression method and the selectionEvent as the parameter. Sample code below.

        ADFUtil.invokeEL("#{bindings.EmpDeptVO.collectionModel.makeCurrent}",
                         new Class[] { SelectionEvent.class },
                         new Object[] { selectionEvent });

3. Now, the selected row is set as current row and you can get the current row reference by using the below EL. Now, you can get all attributes of the selected row by using the above reference.

Row selectedRow =
   (Row)ADFUtil.evaluateEL("#{bindings.EmpDeptVOIterator.currentRow}");

4. Get the attribute value of Ename from the selected row and set it to a pageFlowScope variable say #{pageFlowScope.empName}. Add a popup in the jsf page that displays the #{pageFlowScope.empName} as the selected employee. Write your logic to invoke the popup in the same selectionListener method.

Popup code in the jsf page:

<af:popup id="p1" binding="#{pageFlowScope.ExampleBean.displayNamePopup}">
      <af:dialog id="d1" type="ok" title="Alert">
        <af:outputText value="You have selected Employee: #{pageFlowScope.empName}"
                       id="ot4"/>
      </af:dialog>
</af:popup>

Backing bean containing the selectionListener method and popup binding:

public class ExampleBean {
    private RichPopup displayNamePopup;

    public void rowSelected(SelectionEvent selectionEvent) {
        ADFUtil.invokeEL("#{bindings.EmpDeptVO.collectionModel.makeCurrent}",
                         new Class[] { SelectionEvent.class },
                         new Object[] { selectionEvent });
        Row selectedRow =
            (Row)ADFUtil.evaluateEL("#{bindings.EmpDeptVOIterator.currentRow}");
        ADFUtil.setEL("#{pageFlowScope.empName}",
                      selectedRow.getAttribute("Ename"));
        PopupUtil.invokePopup(displayNamePopup.getClientId(FacesContext.getCurrentInstance()));
        ;
    }

    public void setDisplayNamePopup(RichPopup displayNamePopup) {
        this.displayNamePopup = displayNamePopup;
    }

    public RichPopup getDisplayNamePopup() {
        return displayNamePopup;
    }
}

That's it. When the row is selected, the selectionListener method in the bean is called, current row is set to selected row, stores the current row's Ename attribute to pageFlowScope variable 'empName', invoke the popup programatically, and the same pageFlowScope variable will be displayed in the popup as selected employee name.

Sample screen shots:

ADF UI - How to include Row Header for af:table?

If you're using af:table and row selection is enabled for the table, a must for the table is 'Row Header'. Row header enables the user to select a single row from the table. To add a row header to the table, just add a blank column as the first column and specify width="5", minimumWidth="5" and rowHeader="true" and specify align="right". Don't include any field inside this row header column.

Below is the code for row header. You can copy-paste this code as a first column in the table and that's it. You're done!

<af:column id="c4" rowHeader="true" width="5" minimumWidth="5"
                     align="right"/>

Sample screen shots:
Table without row header:

Table after adding row header:

ADF UI - How to get 'Format' menu for table in af:panelCollection?

TO get the 'Format' menu in af:panelCollection, set columnSelection="multiple" for the af:table inside panelCollection. Actually, setting columnSelection="multiple" will allow user to select multiple table columns at once and apply formatting (Like resizing columns, wrapping the content in the columns, etc.,) and it'll also render a footer for the table which will show status messages like 'columnsHidden'.

<af:table value="#{bindings.EmpDeptVO.collectionModel}" var="row"
                  rows="#{bindings.EmpDeptVO.rangeSize}"
                  emptyText="#{bindings.EmpDeptVO.viewable ? 'No data to display.' : 'Access Denied.'}"
                  fetchSize="#{bindings.EmpDeptVO.rangeSize}"
                  rowBandingInterval="0"
                  selectedRowKeys="#{bindings.EmpDeptVO.collectionModel.selectedRow}"
                  selectionListener="#{bindings.EmpDeptVO.collectionModel.makeCurrent}"
                  rowSelection="single" id="t1"
                  styleClass="AFStretchWidth"
                  columnSelection="multiple"
                  first="0" contentDelivery="immediate" autoHeightRows="10">

Format menu in panelCollection:

Status bar showing 'Columns Hidden':

ADF UI - Setting default display rows to some fixed number (Removing extra space in tables)

When you use af:table to display data, then by default the table will occupy more space than actually required (See image below).

In the above image, the table contains just two rows, but it's taking more space than required. To avoid that, we need to set table's ContentDelivery="immediate" and AutoHeightRows="<some_fixed_number>". See code below:

<af:table value="#{bindings.EmpDeptVO.collectionModel}" var="row"
                  rows="#{bindings.EmpDeptVO.rangeSize}"
                  emptyText="#{bindings.EmpDeptVO.viewable ? 'No data to display.' : 'Access Denied.'}"
                  fetchSize="#{bindings.EmpDeptVO.rangeSize}"
                  rowBandingInterval="0"
                  selectedRowKeys="#{bindings.EmpDeptVO.collectionModel.selectedRow}"
                  selectionListener="#{bindings.EmpDeptVO.collectionModel.makeCurrent}"
                  rowSelection="single" id="t1"
                  partialTriggers=":::qryId1 ::ctb1"
                  columnStretching="column:c1"
                  styleClass="AFStretchWidth" columnSelection="multiple"
                  first="0" contentDelivery="immediate" autoHeightRows="10">

From the above code, we can see that ContentDelivery="immediate" and AutoHeightRows="10". If we set this, if the no. of rows in the table are above 10, it'll just show first 10 rows. We need to scroll down to see the next rows. And, if the no. of rows in the table are below 10, the table just shows only that many no. of rows without any extra space (see image below).

ADF UI - Implementing 'Export to Excel' functionality

Here, we'll see how to implement 'Export to Excel' functionality for ADF tables. For example you have a search results table and you want to export the search results to excel sheet on clicking the button 'Export to Excel'.

To implement this, Drag and drop <af:exportCollectionActionListener> on 'Export to Excel' button. and specify exportedId="<search_results_table_id>" and type="excelHTML". Give fileName="excel_file_name.xls" and title="excel_sheet_name_within_excel_file".

The 'Export to Excel' toolbar button in 'Structure' window:

Here is the code:

<af:commandToolbarButton text="Export to Excel"
                                       id="commandToolbarButton2"
                                       disabled="#{bindings.EmpDeptVO.currentRow==null}"
                                       partialTriggers="t1">
                <af:exportCollectionActionListener type="excelHTML"
                                                   exportedId="t1"
                                                   filename="SearchResults.xls"
                                                   title="Search Results"/>
 </af:commandToolbarButton>

That's it. Now, when you run the page and click on 'Export to Excel' button, it'll generate the excel file and asks to open or save the Excel.

Enjoy!!