selectOneChoice table filter for LOV column

In this post I am going to show how to add a selectOneChoice component as a filter for a column with LOV.

When displaying data into tables and using the out-of-the-box filtering feature, you might want for a column with list of values attribute to also have that list of values in the filter section.

The demo application is built on hr schema and considered we have already built the Model project with business components for Employees and Departments, and the EmployeesVO has a LOV on DepartmentId attribute.

In the ViewController project we then create a new jspx page, employees.jspx and add the employees table from DataControl -> EmployeesVO with Filtering option checked.

To add the data model behind the selectOneChoice filter we intend to put into the department column, we select the Bindings tab for employees page and add a new binding in the Bindings box. Select ‘tree’ in the next window of the create binding wizzard and then fill in the data as in the following screenshot:

In the Source tab of employee page, we add the filter facet for the department column (lines 5-14):

<af:columnsortProperty="DepartmentId"filterable="true"

           sortable="false"

           headerText="#{bindings.EmployeesVO.hints.DepartmentId.label}"

           id="c4"width="150">

  <f:facetname="filter">

    <af:selectOneChoicevalue="#{vs.filterCriteria.DepartmentId}"

                        label="Dep"unselectedLabel=""id="soc2">

      <af:forEachitems="#{bindings.DepartmentsVO.rangeSet}"

                  var="item">

        <f:selectItemid="si2"itemLabel="#{item.DepartmentName}"

                      itemValue="#{item.DepartmentId}"/>

      </af:forEach>

    </af:selectOneChoice>

  </f:facet>

  <af:selectOneChoicevalue="#{row.bindings.DepartmentId.inputValue}"

                      label="#{row.bindings.DepartmentId.label}"

                      required="#{bindings.EmployeesVO.hints.DepartmentId.mandatory}"

                      shortDesc="#{bindings.EmployeesVO.hints.DepartmentId.tooltip}"

                      id="soc1">

    <f:selectItemsvalue="#{row.bindings.DepartmentId.items}"

                   id="si1"/>

  </af:selectOneChoice>

</af:column>