Type ahead made easy

If you’re interested in the user interface, you may have already used the On before keystroke and On after keystroke events. You’ll certainly be happy to know that the handling of these events has been greatly enhanced with 4D v18 R5. In addition, a new command has been created to determine if there is ongoing input when the On before keystroke event is generated. Let’s find out more!

HDI: Type ahead made easy

text inputs

When you enter text, the system may intervene to help you, regardless of the language or the OS. For example, take the case of accented characters in French or Spanish: “ê” “ü” “ñ”. To enter these characters in macOS, the simplest way is to hold down the corresponding key which causes a dialog box to appear:

To select the letter you want, you need to use the arrow keys and then validate your choice with the “return” or “enter” key:

As of 4D v18 R5, the On before keystroke and On after keystroke events are only generated once this type of system dialog (aka IME) is validated. There’s no need to receive the codes corresponding to the arrow keys and the validation key when only the final letter is important!

list boxes

List boxes have also gotten an enhancement. The On before keystroke event is generated as soon as the list box has focus when a key is typed, even if no cell is being entered. This allows us to know which keys have been pressed and makes it possible to programmatically make decisions such as starting a new search or changing the current selection!

MoRE INFO with a new command

How do you know if an event was generated during an actual input or simply because the list box had the focus at the moment a key was pressed on the keyboard? The answer is very simple: the new Is editing text command. It returns True if the user is entering values in an input form object, and False in all other cases. 

Code sample

This simple example shows you how to perform a query as soon as any letter between A and Z is typed on the keyboard (all other characters are ignored in this sample).

Of course, the query can’t be performed while a cell is being modified. That’s why we use the new Is editing text command before performing any new query.

var $char : Text
Case of
:(FORM Event.code=On Before Keystroke)
 If (Not(Is editing text))  // check not in input mode
  $char:=Keystroke
  Form.people:=ds.people.query("firstname = :1 or lastname = :1";$char+"@")
 End if
End case 

 

Another example?

The following animated GIF shows what can be done using this event in a list box, without the help of any other buttons or input areas (the letters that appear on the animated GIF are only displayed to show what keys have been typed on the keyboard).

 

 

Find more details about the command in the doc center!

Conclusion

This feature helps create a more user-friendly interface and we’re quite sure that as a developer, you’ll use it to further enhance your user experience!

For more information, feel free to check out the documentation!