Thursday, September 5, 2013

ADF 11gR1: How to improve the UX of tables with filter


In a typical Oracle ADF application there might be a lot of tables with the query-by-example filter functionality. It is a great ADF standard feature that users love. However there is at least one thing that can be improved.

Use Case
Step 1: The user enters a filter criteria and performs the filtering.

=> The table data is filtered according to the criterion

Step 2: The user clicks on "QBE-Filter" button
=> The filter header row is not visible.
=> The table data is still filtered 
=> There is no hint for the user whether the data is filtered and if so how the data is filtered. From UX point of view the UI Feedback is not perfect.

How to improve
To  improve the user feedback it would be great to at least have a UI hint if the visible data is filtered or if the "Hide QBE-Filter" button would reset the filter. In this blogpost I am going to show a hack how you can achieve the latter one with ADF 11R1. 

Step 1: Create a Javascript file with the following content

The hack is to actually override the default showQBE function with a custom function that queues an AdfQueryEvent to clear all filter criteria before calling the default ADF showQBE function.

To register this override in JavaScript you must register a clientListener for the onLoad event in the JSF page.


Environment

Tested with
ADF 11.1.1.6 normal mode
ADF 11.1.1.7 normal and screenReader mode.

To my surprise this improvement is implemented in ADF 12.1.2! No need to hack if you are on the bleeding edge :)

Disclaimer
The described feature uses an unsupported ADF JavaScript Hack! So use on your own risk if your users want it and your stuck on 11gR1.