Omnis JavaScript Component Series: Text Editor & Lists

JavaScript Component Series_Lists:Text:Tree

The Omnis JavaScript Client allows you to create all types of web and mobile applications that will run on virtually any device, on any platform — including iOS, Android, Windows, OS X, and BlackBerry. As long as the device has a browser capable of running JavaScript, and is HTML5 and CSS3 compatible, you will be able to run your Omnis web or mobile app on that device.

There are over 30 ready-made Omnis Studio JavaScript based components that you can use in your apps, which you can simply drag and drop into your web and mobile forms. In this series of blog articles we explore a few components in each post. In previous articles we have looked at ‘Maps and Charts’, ‘Lists and Grids’, and ‘Buttons & Switches’, as well as the Subform component and new Subform sets. We now offer a preview of the new functionality in the Rich Text Editor, Dynamic Tree lists, and Linked List, available in Omnis Studio 6.

Rich Text Editor

The Rich Text Editor component allows the content in a field to be edited on a device by the end user with word processing like tools that are provided for editing the text. This functionality is very useful for applications where you want to allow end users the ability to edit content and is suitable for many types of web and mobile applications. The JavaScript Rich Text Editor Control can be used instead of a regular edit or multi-line edit field. On mobile devices, the cursor is placed in the selected field and opens the soft keypad ready for typing. The text editing controls in the field appear at the top of the control and allow the end user to format the text, including bold, italic, underline, and so on. The text data in the control use HTML markup language and can include formatted text such as ordered (numbered) and unordered lists (bullets). End users can also insert images using the Paste option.

Dynamic Tree Lists

The content inside a Tree List component can now be built dynamically as the end user expands a node, rather than initially having to build the whole contents of the tree when the form is opened. Building the tree list data and displaying content in a tree list can be better optimized with the ability to build node contents “on the fly” when required. Dynamic trees have a new event which allows you to populate the tree on demand, by only populating node content when a node is expanded. Dynamic trees support ‘node actions’ to allow you to manipulate the nodes in a Tree List programmatically. For example, you can expand or collapse a node, and you can add, delete or rename nodes.

Linked Lists

Enhancements to the Edit and List components allow you to create a new type of dynamic list that updates itself in response to what the end user types into the associated edit box in your remote form. The combination of an Edit control with key presses enabled and a List control using some new properties will allow you to create this new type of “dynamic list”. The new Linked list functionality is in effect like a combo box, but with the extra ability to update itself as the user types. 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.

See the “What’s New in Omnis Studio” guide for complete details on all Omnis Studio 6.0 features including many code samples.

More Omnis Studio 6.0 Features

Utilizing the JavaScript Client functionality, Omnis Studio 6.0 enhances the capabilities of the JavaScript based remote forms and provides over 30 ready-made JavaScript components including the following key components:

Try it for yourself in the Omnis JavaScript Apps Gallery

Demos of the Rich Text Editor, Dynamic Tree Lists and Linked Lists components are available on the Omnis website located within the Omnis JavaScript Apps Gallery. Open the gallery page in your browser on your desktop PC or tablet and try out these components online in the Apps Gallery, or you can download the sample app and examine the code in the latest version of Omnis Studio.

Download Omnis Studio 6.0 90-day trial.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>