Sunday, March 2, 2014

Improving ADF UI Table CRUD Functionality with Auto Focus

Improving and tuning ADF applications performance, doesn't mean only ADF framework technical parameters tuning. Performance tuning could be applied to application UI behaviour. I will use ADF Faces table example in this post, by default when new row is inserted - focus for the new row column is not set, user needs to do one extra click to set focus and start entering data. There is a way to eliminate this extra click and set focus automatically for a column in ADF table row. I will describe generic method to achieve such functionality.

Let's see first, how it works. We have regular ADF Faces table:

Press Create button to insert a new row:

By default, when new row is inserted - focus in the new row column is not set, user needs to do one extra click and set focus by himself. This is improved in my sample application -, focus in the new row column is set automatically after Create button is pressed (it is configured to set focus in the first column):

It is important to understand, while setting focus for ADF UI table row columns, each row in HTML is assigned with certain ID. This ID is appended to the original inputText component ID, basically the same inputText component is created as many times, as there are rows in the table. Here you can see, new row was assigned with index 25, this is index is not related to row number:

Focus ID - inputText component ID in the first column of a new row. This points to a region, panelCollection, table, row ID and inputText component ID's.

I create one more row:

Focus is set automatically:

This time, row ID was different - I will describe below, how such ID can be retrieved in generic method:

From implementation point of view, there is Create button with JSF attributes. One of the attributes, sets ID of inputText for the focus, second provides action name to be executed. Focus is set through JavaScript function:

There are few changes needed for ADF UI table properties. Make sure to set contentDelivery="immediate" and displayRow="selected" properties, this is needed to ensure focus will be set correctly every time, even when user scrolls through the table:

Sample application implements generic action lister, it reads method to execute from component attribute, as well as UI component ID to apply auto focus. We are locating table binding automatically, getting Client Row Key (this is row ID, I was mentioning in the example above) and constructing final ID to use for the focus. As you can see, method action is executed first, and auto focus code afterwards (we need to have new row inserted initially):

At last, JavaScript method is invoked from Java, to set focus in the row identified by row ID number.


JustMe said...

Hi Andrejus, the only concern I have with this is that you need to hard code the input text's ID. Oracle should provide this out of the box to focus on new created row. Regards. Leon.

Andrejus Baranovskis said...

This is just an example. No need to hardcode, you could identify field to focus in more sophisticated ways, all depends on the use case and requirements. For example, through custom property, etc.


Serge de Schaetzen said...

Thanks Andrejus, works like a charm!

Andrejus Baranovskis said...

Great !

Vinothgan As said...

Hi, I use Jdev I tried the same in my application and for chrome and firefox it works. But the only issue that i have is, if i browse any other tabs/files in my pc after clicking on the commandlink i dont see my cursor and if have my application open always and if don't browse anything then it works fine.

In IE, its not working. When i press the button then the cursor is not going to the expected field but i could see the tooltip getting displayed.

Any Advice?

Anonymous said...

Saved My Day.