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: