In a previous ADF Code Corner post, I explained how to change the table filter behavior by intercepting the query condition in a query filter. See sample #30 at http://www.oracle.com/technetwork/developer-tools/adf/learnmore/index-101235.html

In this OTN Harvest post I explain how to prevent users from providing invalid character entries as table filter criteria to avoid problems upon re-querying the table. In the example shown next, only numeric values are allowed for a table column filter.

To create a table that allows data filtering, drag a View Object – or a data collection of a Web Service or JPA business service – from the DataControls panel and drop it as a table. Choose the Enable Filtering option in the Edit Table Columns dialog so the table renders with the column filter boxes displayed.

The table filter fields are created using implicit af:inputText components that need to be customized for you to apply a custom filter input component, or to change the input behavior. To change the input filter, so only a defined set of input keys is allowed, you need to change the default filter field with your own af:inputText field to which you apply an af:clientListener tag that filters user keyboard entries.

For this, in the Oracle JDeveloper visual editor, select the column which filter you want to change and expand the column node in the Oracle JDeveloper Structure Window. Part of the column definition is the Column facet node. Expand the facets so you see the filter facet entry. The filter facet is grayed out as there is no custom facet defined. In a next step, open theComponent Palette (ctrl+shift+P) and drag an Input Text component onto the facet. This demarks the first part in the filter customization.

To make the custom filter component work, you need to map the af:inputText component value property to the ADF filter criteria that is exposed in the Expression Builder.

Open the Expression Builder for the filter input component value property by clicking the arrow icon to its right. In the Expression Builder expand the JSP Objects | vs | filterCriteria node to select the attribute name represented by the table column. The vs entry is the name of a variable that is defined on the table and that grants you access to the table attributes.

Now that the filter works as before – though using a custom filter input component – you can add the af:clientListener tag to your custom filter component – af:inputText – to call out to JavaScript when users type in the column filter field

Point the client filter method property to a JavaScript function that you reference or add through using the af:resource tag and set the type property value to keyDown.

<af:document id="d1">
    <af:resource type="javascript" source="/js/filterHandler.js"/>
…

The filter definition looks as shown below

<af:inputText label="Label 1" id="it1"
                        value="#{vs.filterCriteria.Employe
       <af:clientListener method="suppressCharacterInput"
                                    type="keyDown"/>
</af:inputText>

The JavaScript code that you can use to either filter character inputs or numeric inputs is shown below. Just store this code in an external JavaScript (.js) file and reference it from the af:resource tag.

//Allow numbers, cursor control keys and delete keys
function suppressCharacterInput(evt) {
    var _keyCode = evt.getKeyCode();
    var _filterField = evt.getCurrentTarget();
    var _oldValue = _filterField.getValue();

    if (!((_keyCode < 57) ||(_keyCode > 96 && _keyCode < 105))) {
        _filterField.setValue(_oldValue);
        evt.cancel();
    }
}

//Allow characters, cursor control keys and delete keys
function suppressNumericInput(evt) {
 var _keyCode = evt.getKeyCode();
 var _filterField = evt.getCurrentTarget();
 var _oldValue = _filterField.getValue();

 //check for numbers
 if ((_keyCode < 57 && _keyCode > 47) ||
     (_keyCode > 96 && _keyCode < 105)){
    _filterField.setValue(_oldValue);
    evt.cancel();
  }
}

But what if browsers don't allow JavaScript ? Don't worry about this. If browsers would not support JavaScript then ADF Faces as a whole would not work and you had a different problem.