Developers

Omnis Technical Note TNJC0004Oct 2013

JavaScript Components: Linked List

for Omnis Studio 6.0 or above

The Linked list is a new type of list introduced in Omnis Studio 6 that can be used to enhance the interactivity and usability of your web and mobile applications. Enhancements to the Edit control and List components allow you to create a linked list which updates itself dynamically in response to what the end user types into an associated edit box. To enable this feature, edit controls can now detect certain key presses and can be linked to a list control, while for lists themselves there is a new property to display selected lines only. The new Linked list functionality is quite similar to a combo box, since it has an edit box and list, but with the extra ability for the list to update itself as the end user types.

Setting up a linked list

To create a linked list, add a standard Edit control and List control to your remote form. Before setting up the list, you need to set various properties on the edit control part of the linked list. Edit controls have an event called evKeyPress - this need to be enabled in the $events property for the control. The event has a single event parameter, pKeyList, which is a three column list containing the keys entered since the last evKeyPress event (or since typing started) with a row for each key in the order the keys were pressed. The new Key press detection was added to support Linked Lists, but it could be used by itself for other purposes. The $keyeventdelay property is the minimum number of milliseconds (0-2000) between evKeyPress events, and the delay before the first evKeyPress is reported.

You need to set various properties of the Edit control to link the associated list control.

The Edit control has the $linkedobject property which is the name of a list control linked to the Edit control. You need to add some code to populate the list either from a database or by adding default lines. You also need to add the code to filter the list in response to evKeyPress, based on the current value of the instance variable specified for the Edit control. In addition, you need to enable the $selectedlinesonly property on the list to display selected lines only (this only applies when $ischecklist is false).

The following code can be placed behind the edit control which detects what key the user has pressed (passed to the method in pKeyList) and filters the list so only the selected lines are displayed based on the key pressed.

On evKeyPress     Calculate iKeyList as pKeyList     Do iLinkedList.$search(mid(low(iLinkedListCol),1,len(iEditVar))=low(iEditVar))

When the end user types into the Edit control, the linked list will appear automatically. It is not necessary to process any events for the list control, since the dynamic list behavior is determined by Omnis automatically by being linked in this way.

The library can be downloaded from Github: https://github.com/OmnisStudio/Omnis-LinkedList (requires Studio 8.1.2 or above)

For more information about linked lists refer to the 'JavaScript Components' chapter in the 'Creating Web & Mobile Apps' manual which is available here on the Omnis website.