BUILDING MOBILE APPS WITH JAVASCRIPT COMPONENTS

Building_Apps_JavaScript_Comps_Blog1

The Omnis JavaScript components are the building blocks you use to create the forms within your web and mobile apps using Omnis Studio. There are over 30 ready-made JavaScript Components which you can add to your remote forms – everything from simple form fields, to more structured types such as lists and grids, and more graphical types such as maps and charts. When you construct the UI (user interface) for your app you must chose the right components, so when your app is complete your end users can navigate around your app easily, manage and complete tasks, and access and manipulate their data. So the type and range of components available, as well as their functionality and use-ability, are critical in a modern IDE and with Omnis Studio you will have more than enough choice to create the UI for any type of web or mobile app.

We have covered most of the JavaScript Components here in this blog and below we have selected just a few to highlight the more graphical components, with links to blog posts where relevant.

A View onto your Data

There are several types of list or grid available in Omnis Studio which means you have complete flexibility in displaying lists of data – this allows the end user to survey their data and make selections. Single columns of data can be displayed simply using the ‘List’ component, and a hierarchical list of data can be displayed in a Tree list. For more complex data sets that need to be laid out in rows and columns, a Data grid or Headed list is provided, and for more sophisticated layouts akin to a spreadsheet the Complex grid is provided. Read more about lists and grids.

Your Data in Graphic Detail

You can display a location or thing in your Omnis web and mobile apps using the Map Control, which is essentially a container for displaying a Google™ map in your web form. By setting the longitude and latitude and other properties, the Map control provides a very rich interface in your apps for providing services based on location. (Note you have to register with Google to obtain an API key.)

Omnis Studio provides two types of JavaScript chart components, namely the Pie chart and Bar chart which can be used to display various types of numerical data in a graphical way – this is often preferable to showing rows and columns of numbers and both chart types offer a lot of interactivity with the end user. In pie charts, segments can fly out, and you can detect clicks to allow you to drill down into the data. Read more about maps and charts.

Navigation and Application Flow

Navigation is an important factor to consider when designing your web or mobile app – aside from the data entry and display, the effectiveness of the navigation in your app will have an impact on its success or ease of use. Furthermore, effective navigation and “flow” is even more critical if your app is intended for mobile devices since you have limited space and users can ‘only’ touch and slide objects. To this end Omnis Studio provides several components for navigation and providing logical sections or steps in your app.

The Nav bar allows you to present a number of separate panes in a confined space and the end user can simply click or touch to shuffle through the panes. A similar effect can be achieved with a Tab bar which allows the end user to switch back and forth between sections or panes in your app. The Page control can also be used to flip between panes, and the Hyperlink control can be used to navigate through a series of options, or the Tree list can present a number of options arranged in a hierarchy. For a more conventional approach to navigation, the Nav menu provides a cascading menu structure that allows users to select from a hierarchical list of options. Read more about tabs and navigation.

See them All!

Fortunately we provide an online gallery showcasing the JavaScript Components available in Omnis Studio – in the gallery you can try out each component in an example app and download the code (Omnis library) which you can examine or add to your own apps. Click here to open the JavaScript Components Gallery.

If you are interested in looking back at all the JavaScript Components we have covered in the blog you can access this category in the blog (scroll down to view them all): Omnis JavaScript Component Series.

Omnis JavaScript Component Series: Rich HTML Text Editing

JavaScript_HTML Text Edit_omnisBlog_20140130-01

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

Over 30 ready-made JavaScript based components are available in Omnis Studio which you can use in your web or mobile applications by easily dragging and dropping onto a remote form. In our continuing Omnis JavaScript Components blog series, today we look at how you can allow the end user to edit HTML text and easily display it in your web and mobile apps.

Rich Text for Web & Mobile Apps

To display ordinary text in your web and mobile apps, you can use the standard Edit and Label controls. However, to provide a richer text display and editing experience for end users, you can use the HTML based “Rich Text Editor” and “Html Object” JavaScript controls. By loading character (text) based data into the Rich text editor control, you’ll allow the user to edit and augment the text using different fonts, character styles (bold, etc.) and other paragraph formatting properties. When text is presented in the Rich text editor (and the $showcontrols property is enabled), the text editing buttons and other controls appear at the top of the field. On mobile devices, the cursor is placed in the selected field and the soft keypad is opened ready for typing.

The text data in the Rich text editor control is stored in HTML format and can be saved into a character instance variable like any other text data. If you want to display this HTML-formatted text in your form, you can use the HTML Object and assign the instance variable containing the HTML data directly to the $html property of the HTML control. You can embed any of the standard HTML tags into your HTML text, including links, styles, and tables, but your complete HTML text must start with an element declaration such as <div…> or <style>.

For more information about using HTML in your remote forms, refer to the ‘JavaScript Components’ chapter in the ‘Creating Web & Mobile Apps’ manual which you can view or download here.

Try for yourself in the JavaScript Components Gallery

There is a sample app in the JavaScript Components Gallery to show you how you can use the HTML Text Editor and HTML Object controls. To view the sample apps, open the gallery page in the browser on your desktop PC or tablet and click on “Rich Text Editor” and “Html”, or download the apps and examine the code in the latest version of Omnis Studio.

Download Omnis Studio 6.x 90-day trial.

Omnis JavaScript Component Series: Uploading Files

JavaScript_Upload Files omnisBlog_20140108-01

The Omnis JavaScript Client in Omnis Studio 6.0 allows you to create all types of web and mobile enterprise applications that will run on virtually any device, on any platform — including iOS, Android, Windows, and BlackBerry mobile devices, as well as OS X and Windows desktops. 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.

So far in this series of blog articles on the Omnis JavaScript Components we have covered many of the visual components which you can simply drag and drop onto your remote forms to create the user interface for your web and mobile apps. In this article, we turn to the File control (a non-visual component) which when placed somewhere on your remote form allows end users to upload or download a file. We also look at how you can display images and play video in your Ommis Studio web and mobile apps.

Exchanging files in your apps

In many types of web and mobile applications, your end users may need the ability to add or upload a file. For example, you may want end users to add a photo or image, or upload other assets such as PDFs or presentations. On other occasions you may want to allow end users to download a file to their own device. You can perform both of these tasks using the JavaScript File control.

To enable the upload or download functions in the File control, you need to assign an “action” to the component itself. When you assign the upload action the control opens a standard Upload dialog to allow the end user to select a local file to upload. There are various properties enabling you to change the text and error messages on the Upload dialog, and you can change its appearance by editing a CSS style sheet.

For downloads, the File control displays a standard hyperlink within your remote form pointing to the file to be downloaded, or you can assign a row variable to the control containing the binary data of the file to download. The download function is supported on most mobile devices (you’ll need to test specific devices) and if possible, the file will be opened in a browser or appropriate file viewer on the device.

Put UI in the picture

A File control is used in the Contacts sample app (available in Welcome window when you start Omnis Studio) to allow end users to upload a photo for each contact. The remote form in the sample app has a Picture control and an Add button which initializes the upload process using the File control – a similar setup could equally be used to upload a video.

Photos and other images can be displayed in the JavaScript Picture control by specifying the URL of the image to be displayed, or as in the sample app above, a binary instance variable containing the raw image data. Similarly, videos can be embedded directly within a remote form using the JavaScript Video control – using the default setup you only need to assign the ID of a video hosted on YouTube.

For more information about the File, Picture, and Video control components, including further information about all their methods and code samples, refer to the ‘JavaScript Components’ chapter in the ‘Creating Web & Mobile Apps’ manual which you can download from the Omnis website.

Try for yourself in the JavaScript Components Gallery

A sample app in the JavaScript Components Gallery is available to illustrate how you can use the File control, as well as the Picture and Video controls. To view the sample apps, open the gallery page in the browser on your desktop PC or tablet and click on “File Upload/Download”, “Picture” or “Video”, or download the apps and examine the code in the latest version of Omnis Studio. If you are new to Omnis Studio, you can download Omnis Studio 6.x 90-day trial and try out the Contacts sample app in the Welcome window.

Omnis JavaScript Component Series: PDF & Mobile Printing

JSPrinting_20131125

The Omnis JavaScript Client in Omnis Studio 6.0 allows you to create all types of web and mobile enterprise applications that will run on virtually any device, on any platform — including iOS, Android, Windows, and BlackBerry mobile devices, as well as OS X and Windows desktops. 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.

To date in this series of blog articles on Omnis JavaScript Components, we have covered many of the visual components which you can drag and drop onto your remote forms to create the user interface for your web and mobile apps. We now turn to another component or “device”, the PDF Device. The PDF Device can print PDF documents inside the Omnis JavaScript Client or to a separate tab in the end user’s web or mobile browser.

Truly “Portable” documents

The PDF Device was introduced in the Omnis Studio 6.0 release. For most web and mobile applications, this could be the preferred method for printing and displaying documents and reports especially during times when access to a physical printer is not possible or desirable. The PDF option can be chosen in the Omnis Studio Print Destination dialog, but in most cases, and especially for mobile apps, you will probably want more control over printing an Omnis report to PDF and specifying how the file is displayed using Omnis Studio code.

The PDF Device has a number of functions allowing you to set up reports sent to temporary PDF files, to set up document properties, and to add security features such as passwords and encryption (support for the latter may depend on the device). Having created an Omnis report class, and printed it to memory, you can send your report to a PDF document using the $clientcommand method.

The showpdf client command opens the specified PDF document in a new window or tab, which depends on the end-user browser settings, including their setting for popups. Alternatively, the assignpdf client command assigns the PDF to an HTML control in the remote form which will open the PDF file using the PDF viewer installed in the end user’s browser.

For more information about the PDF Device, including details of all the commands and method syntax, refer to the ‘JavaScript Remote Forms’ chapter in the ‘Creating Web & Mobile Apps’ manual which you can view or download here.

Try it for yourself in the JavaScript Components Gallery

A sample app in the JavaScript Components Gallery illustrates how you can use the PDF Device in your web and mobile applications. To view the app, open the gallery page in the browser on your desktop PC or tablet and click on “PDF Device”, or download the app and examine the code in the latest version of Omnis Studio.

Download Omnis Studio 6.x 90-day trial

Omnis JavaScript Component Series: Progress Bar & Slider

omnisBlog_JS Series_progressbar_20131108-01

The Omnis JavaScript Client in Omnis Studio 6.0 allows you to create all types of web and mobile enterprise applications that will run on virtually any device, on any platform — including iOS, Android, Windows, and BlackBerry mobile devices, as well as OS X and Windows desktops. 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.

Over 30 ready-made JavaScript based components are available in Omnis Studio which you can use in your web or mobile applications by easily dragging and dropping onto a remote form. In this series of blog articles on Omnis JavaScript Components we explore a few controls in each post, and in this blog post we look at the Progress bar and Slider components.

Making great progress

When you are processing a long server task in your web or mobile application you can display a progress bar to show the end user that the process is working and that your program has not just inadvertently frozen. The Progress bar can be used to display a standard HTML5 progress bar that updates itself as a background process is moving ahead.

You control the value represented by the progress bar by incrementing the $value property of the progress component itself in your code – it is a value between 0 and a maximum value specified in $max. To enable the progress bar to move, indicating progress, you must send a “Carry on” event in your event processing code, which can also be used to increment the current value. It is also good practice to add a Cancel button to the form or provide some other way for the end user to cancel the process. See the ‘JavaScript Components’ chapter in the ‘Creating Web & Mobile Apps’ manual for example code to implement a slider and cancel button, or download the sample app mentioned below.

Pick a number

Allowing the end user to enter a numeric value is a very common task in any web or mobile application. Rather than “forcing” end users to enter the value from the keyboard into a form field, you could use a Slider to allow users to set a numeric value simply by dragging their finger, adding to the interactivity of your app. Using a slider has the added advantage of setting the range of the value since the slider will have a lower and upper set by default. The current “value” of the slider corresponds to where the “pointer” icon is positioned on the slider (note you can change the icon of the pointer). The $min and $max properties sets the range for the slider, while $step specifies the size of each step the slider takes between the min and max values as the pointer is dragged.

The Slider component reports three events: evStartSlider, evEndSlider, and evNewValue, which you can trap in the $event() method for the component. These events all pass the current value of the slider in the pSliderValue event parameter which you can use in your code to set a value as appropriate.

Try it for yourself in the JavaScript Components Gallery

Sample apps in the JavaScript Components Gallery  illustrate how you can use the Progress and Slider components in your web and mobile applications. To view the sample applications, open the gallery page in your browser on your desktop PC or tablet and click on “Progress” or “Slider”, plus you can view some customized sliders in the “Transparency” sample application. Try out the apps in the gallery page online, or download the apps and examine the code in the latest version of Omnis Studio.

Download Omnis Studio 6.x 90-day trial.

Omnis Javascript Component Series: Dialogs & Preferences

JS Series_dialogs

The Omnis JavaScript Client in Omnis Studio 6.0 allows you to create all types of web and mobile enterprise applications that will run on virtually any device, on any platform — including iOS, Android, and BlackBerry mobile devices, as well as OS X and Windows desktops. 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.

Over 30 ready-made JavaScript based components are available in Omnis Studio which you can use in your web or mobile applications by easily dragging and dropping onto a remote form. In this series of blog articles on Omnis JavaScript Components we explore a few controls in each post. In this blog post, we look at how you can use the $clientcommand method to create Dialogs and User Preferences to enhance your web and mobile applications.

Right on message

Various standard dialogs or message boxes are available in the JavaScript Client which you can open using the $clientcommand method (which must be executed on the Omnis Server). These are the typical OK and Yes/No boxes that inform the end user or allow them to confirm a choice, thereby increasing interactivity in your web and mobile apps. Two parameters are sent with the client command, comprising the ‘command’ and a ‘row’ variable which contains further parameters depending on the command used. In the case of dialogs, the possible ‘commands’ are: “Ok/Cancel Message”, “Yes/No Message” (also No/Yes), or a general “JavaScript Message Box” corresponding to the type of dialog box. The parameter row variable would contain the actual message text, the dialog title text, as well as the name of a method that can be called when the end user taps on one of the buttons.

Save it for later

You can use the $clientcommand method to save and load end-user data on the client such as user preferences. Alternatively, you could use these commands to store and load usernames and/or passwords to allow the end user to log onto a web or mobile app. The “savepreference” client command saves a value as a named preference on the client, while “loadpreference” loads a named preference value from the client into an instance variable in your web or mobile form. This relatively simple method of storing and retrieving a user preference could greatly enhance the usability of your web or mobile application.

To find out more about using the client commands, including setting up dialogs and preference, please refer to the ‘Creating Web & Mobile Apps’ manual which you can view or download from the Omnis website.

Try it for yourself in the JavaScript Components Gallery

Sample apps in the JavaScript Components Gallery are available to illustrate how you can use the $clientcommand to create dialogs and preferences. To view the sample apps, open the gallery page in your browser on your desktop PC or tablet and click on “Dialogs” or “Preferences”. Try out the apps in the gallery page, or download the apps and examine the code in the latest version of Omnis Studio.

Download Omnis Studio 6.x 90-day trial.

Omnis Javascript Component Series: Animating Objects

JS Series Animation Title

The Omnis JavaScript Client in Omnis Studio 6.0 allows you to create all types of web and mobile applications that will run on virtually any device, on any platform — including iOS, Android, BlackBerry, OS X, and Windows desktops and mobile devices. 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 Studio web or mobile app on that device.

Over 30 ready-made JavaScript based components are available in Omnis Studio which you can use in your web or mobile applications by simply dragging and dropping onto a remote form. In this series of blog posts on “Omnis JavaScript Components” we explore a few controls in each post. We now turn to animation and background objects which are suitable to enhance the user interface within your web and mobile apps.

Enter “stage” left

In Omnis Studio, “Animation” refers to moving and changing objects dynamically in your web and mobile forms to create animated effects, not stop-frame animation for producing movies. There is not one single Animation control by itself. Instead you can animate various types of components using a series of methods available in all remote forms. Animation can “ease” (move) a window or pane into view over a short space of time, thus creating an animated effect, which may enhance the user experience. Alternatively, you could initially make a window or pane invisible and over time make it visible again by changing its transparency. These simple effects can greatly enhance the user interface in your web and mobile apps and once you have mastered this technique, adding animation to controls is not difficult.

To create an animation in Omnis Studio you have to define a block of object property changes and then “commit” the animation using the appropriate methods in your code. For example, you can “ease in” a logon window by first using the $beginanimations method to define the speed and style of animation, then specify what object property changes you want to make. In this case you change the alpha (transparency) and left properties of the logon pane, and then you use $commitanimations to start the animation (see the illustration). This code can be executed in the construct method of the form.

The unsung heroes of form design

To design effective web and mobile forms you need to consider the design and layout of the fields and other objects in the form. In addition to choosing the right controls and placing them in a logical order, the layout of your forms can be greatly enhanced using various graphical objects including boxes, lines, and gradients. All of these objects are placed on a remote form using a single control, the Background Control. The basic control starts as an ellipse but it can be set to many other shapes including Rectangle, Rounded Rectangle, Horz and Vert Line, Triangle, as well as Image. The Background control also allows various animations or effects such as fading the object in or out or rotating the object, and various attributes of an object can be changed dynamically in your code such as an object’s transparency.

Try it for yourself in the Omnis JavaScript Apps Gallery

Demos of the Animation features and Background Control are available in the Omnis JavaScript Components Gallery under ‘Animation’ and ‘Background’. Open the gallery page in your browser on your desktop PC or tablet and try out these components in the online gallery, or you can download the sample app and examine the code in the latest version of Omnis Studio. Download Omnis Studio 6.x 90-day trial.

Omnis JavaScript Component Series: Client Methods

JavaScript_Client Methods_main

The Omnis JavaScript Client in Omnis Studio 6.0 allows you to create all types of web and mobile enterprise applications that will run on virtually any device, on any platform — including iOS, Android, BlackBerry, OS X, and Windows desktops and mobile devices. 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.

Over 30 ready-made JavaScript based components are available in Omnis Studio which you can use in your web or mobile applications by easily dragging and dropping onto a remote form. In this series of blog articles on “Omnis JavaScript Components” we explore a few controls in each post. For this blog post, we look into how you can write methods behind the forms and components in your web and mobile applications.

There’s a method for that

Omnis Studio has a very powerful scripting language that comprises built-in commands, functions, and methods, which allow you to perform more or less any task in your web or mobile application, however simple or complex the task. In addition to built-in commands and methods, Omnis Studio allows you to write your own methods that again could perform literally any task you choose. While designing the layout of your web and mobile forms and adding controls to those forms is critical to the user interface of any app, the business of writing methods is really at the heart of application development. Omnis Studio provides all the techniques and tools you need to write powerful methods in your web and mobile apps.

Faster, richer and more interactive…

Certain methods like “event handling methods” can be run on the client instead of running them on the Omnis App Server. These are variously called “client executed methods”, “client-side methods”, or “client methods” for short. When such client methods are called in your application, runtime execution does not pass back to the Omnis App Server, but rather the method is executed entirely in the end-user’s browser within the JavaScript Client. Enabling certain methods to execute on the client can speed up your application by cutting down on network traffic, while from a design point of view, running a method on the client may allow you to add more interactivity into the user interface of your web or mobile application.

Field validation can be implemented as a client method, as illustrated in the “Client Methods” sample app

To enable a method to execute on the client, you need to right-click on the method name in the method editor and select the ‘Execute on Client’ option. For example, you could double-click on a pushbutton to highlight its event method and then right-click on the method to set it to run on the client. Omnis then checks the method automatically and if it can be executed on the client it will be shown in pink in the method editor, otherwise Omnis will tell you about the possible restrictions in the method and you may have to modify your code. Whether or not an existing method can be enabled to execute on the client will depend on the Omnis commands and functions you have used, and in some cases the type and scope of the variables used in the method.

Try it for yourself in the Omnis JavaScript Apps Gallery

A very useful and informative example application in the Omnis JavaScript Components Gallery illustrates how you can use client methods. The app includes a simple entry form with client-side field validation, and some animated help tips. There is a client method behind the Add button to check that the fields contain some data, plus a client method is used to pop up and animate the help tips. To view the sample app, open the gallery page in your browser on your desktop PC or tablet and click on “Client Methods”: you can try out this app in the gallery page, or you can download the app and examine the code in the latest version of Omnis Studio.

Download Omnis Studio 6.x 90-day trial.

Omnis Javascript Component Series: Tab & Navigation Bars

JavaScrip_Tab&Nav

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 desktops and mobile devices. 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 JavaScript based components in Omnis Studio that you can use in your web or mobile apps, which you can simply drag and drop onto a remote form. 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’, ‘Buttons & Switches’, ‘Subforms’, and ‘Text Editor & Lists’. We now turn to the Tab bar, Nav bar and Page controls which can provide different forms of navigation or presentation within your web and mobile apps.

Put it on the tab

The Tab bar component is deceptively simple, yet powerful. It enables you to control the layout of the fields or application flow in your web and mobile forms. The Tab bar itself has many properties that let you govern its appearance, including the ability to change colors and fonts, to add an icon to each tab, and to make the tabs align vertically. When the end user clicks a tab, an event is generated which you can use in your code to trigger an action. You can link a Tab bar to a page pane (using the $linkedobject property) so that when the user clicks a tab, a different pane is displayed. This functionality allows you to arrange the fields and other controls on your form under different tabs and panes, allowing you to create a highly organized interface that is broken down into logical areas – this technique is good from a general design standpoint, but also very useful for a mobile form when you need to pack numerous fields and controls into a limited area.

Another simple navigation component, Page control, can be linked to a page pane, and allows the end user to change the current page in the linked paged pane simply by swiping over the control (or clicking for non-touch screens). The Page control gives the end user a visual clue as to the current selected pane in the linked page pane object. The highlighted dot in the control changes to reflect the current page in the linked paged pane.

Steering end user on the right course

The Navigation bar component (Nav bar) is similar to the Tab bar component. The Nav bar can be linked to a page pane to display a few fields and controls at a time, allowing end users to easily switch to different parts of your application, or tightly directing a number of steps in a process. The Nav bar has its origins on mobile platforms therefore may be better suited to your mobile or tablet based applications. The Nav bar has a main title in the middle of the control, and it can have a left and/or right button which responds to user clicks. It also has a number of properties for setting the color, fonts, icons and style of the bar and buttons. In addition to detecting clicks on the left and right buttons, the Nav bar has the ‘push’ method allowing you to configure the content of the Nav bar itself and the actions taken in response to user clicks.

Try it for yourself in the Omnis JavaScript Apps Gallery

Demos of all these navigation controls are available in the Omnis JavaScript Apps Gallery under their respective names: Tab bar, Nav bar and Page control. Open the gallery page in your browser on your desktop PC or tablet and try out these components in the online gallery, or you can download the sample app and examine the code in the latest version of Omnis Studio. Download Omnis Studio 6.x 90-day trial.

 

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.