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.
