Keyboard shortcuts on ADF table

JDev version:
Source: GitHub

We often create applications which require very quick data entry. As a real world example, imagine creating a supply-chain application for an e-commerce vendor. The computers available at warehouses are not equipped with mouse either. A common request from such users is to enable the application with the usual keyboard shortcuts, in order to allow fast data entry.

Now, there is a great deal of discussion as to how much we should be overriding the default browser shortcuts. Some web developers are quite vocal in their view of not overriding basic browser shortcuts such as Ctrl+S, Ctrl+T or Ctrl+W. That discussion is beyond the scope of this blog.

This blog mainly deals with creating custom shortcuts, along with Control or Shift key modifiers.

The setup is simple - an ADF application which displays employee records from the HR schema. The user selects a record and uses keyboard short-cuts to perform operations such as:

a) copying and pasting a row - Ctrl+C and Ctrl+V
b) saving the changes - Shift+S
c) rolling back changes - Ctrl+Z
d) deleting a row - Delete and Shift+Delete

These shortcuts are a prototype and you may create your own shortcuts out of a variety of keyboard keys and combinations.

The JS file has one method, which gets called on keyup on the ADF table. You set clientComponent = true on the table, and add a client listener and a server listener. On each condition, we would pass a JavaScript object to the server event, which would tell us which logic to execute.

This is the interesting part - the keyboardActionEvent JS method:

The evt object passed to this function contains the key-code and key-modifier. When we press a keyboard combination like Ctrl+C or Shift+Del or Alt+X, the C or Del or X are the key-codes, while the Ctrl, Shift and Alt are the key modifiers.

These values are almost consistent across the modern browsers, but do check for cross-browser compatibility before applying this solution.

Once the appropriate action is determined, a JavaScript object is sent with this value to the server listener. Note the { action: action } object (can be shortened in ES6 as { action }). This object can be extracted from the object.

Backing bean method:
The action is the parameter which is sent as the JavaScript object. This String is sent to the application module and the appropriate model logic is executed.

Application module method: