Tab Index with PanelFormLayout

JDev: 12.1.3.0.0
Source: GitHub

This article talks about an interesting use case of JavaScript in ADF faces - the tab index.

By default when we use a panel-form-layout in ADF faces, the default behaviour of the cursor on tab is to go the next element as defined inside your panel-form-layout xml metadata.

So for a layout with 4 rows and 2 columns, the default cursor travel behaviour is something like this:

But what if I need a traverse pattern like this:

One not-so-simple and tedious way would be to to rearrange the items inside the form-layout. But for a large and complex form that is not an ideal option, and obviously that is not the solution I am planning to provide.

A simpler alternative would be to write a small JavaScript client-listener method, which would take 2 arguments - the previous item and the next item - and depending on these 2 values, it would find the item to focus on. The previous element option would be used when the user wants to go in the reverse direction with SHIFT+TAB. Each item in the panel-form-layout would have this client-listener.

This approach would be quite useful as there would be no need to make any alteration to the arrangement of the components inside the form-layout.

Cheers!