Posts

Showing posts from July, 2019

Tab Index with PanelFormLayout

Image
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 S…