Omnis JavaScript Component Series: Lists and Grids


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, and OS X. 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.

The Omnis Studio SDK itself provides a very rich environment for creating web and mobile apps using the JavaScript Client with all the tools you would expect in a mature development environment including a debugger, SQL database browser, report generator, and a wealth of GUI design components. There are over 30 ready-made JavaScript based components that you can use in your web and mobile apps. In this series of blog articles, we will explore a few components at a time in each post. In our previous article we looked at Maps and Charts. We’ll now explore Lists and Grids.

Show me the data

Most business applications require that you store, manage and analyze data in various formats. You can use entry forms to enter data, or you can import data from other sources. However, once the data has been captured you will most likely need to review and manipulate it further. In most cases, the best and most convenient way of viewing a large volume of collected data is in a list or tabular format. Fortunately, Omnis provides several different JavaScript components for displaying data in a list or grid layout in your web and mobile apps. For example, 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 ‘Complex grid’ can provide the option of horizontal and vertical ruling lines and formatted header sections. The Complex grid even allows you to embed other components and other interactive features into the grid.

Omnis Studio provides several different list and grid-like components for displaying all types of list data.

Lists, any way you like

The standard JavaScript List component enables you to display a single column list on your form allowing end users to select a particular line. For lists with many columns, you may prefer to use the Data grid, or for a more compact single-column list you can use the ‘Droplist’ component. To include an icon next to the text in each list line, you can use the ‘Tree list’. This also allows the end user to select a line by clicking the icon. Whichever visual list or grid component you choose, the contents that populate a form list is retrieved from a data list variable: this is a special and very powerful data type in Omnis that can potentially contain many thousands of rows and columns of data. In single-column lists, the first column of the list variable content is what is used to populate the list. For more complex list component types, the list variable must contain further columns of data. As with all Omnis JavaScript components, lists and grids have many individual properties that enable you to style their visual appearance and layout.

Analyze and update your data, all in one place

The real “powerhouse” of the list and grid category is the ‘Complex grid’. In addition to displaying your data in a spreadsheet-like table, this component allows you to add other JavaScript components in the row and header sections of the grid component itself, including standard entry fields, buttons, checkboxes, and even other lists. You can place methods (code) behind the embedded components to react to user input and clicks. This creates highly functional, feature rich forms for detailed data analysis and data entry for your web and mobile applications. To illustrate, a Complex grid has been built for the ‘Webshop’ sample app (available in the Omnis SDK under the Welcome Start screen) to create a complete online order and checkout system for managing a restaurant or fast food store. What is powerful is that the order system is built using one Complex grid with other components and controls embedded, which is populated from the product database as the form is displayed in the end user’s browser.

The Complex grid JavaScript component lets you build highly functional, interactive data forms for web and mobile apps.

Try it for yourself: the Apps Gallery

A sample app for Complex grid and Data grid components, as well as all the different types of List components can be found in the JavaScript Apps Gallery located on the Omnis website. Open the gallery page in your browser on your desktop PC or tablet and select the component name in the list, e.g. “List”, “Complex grid”, or “Data grid”. You can try these apps in the Apps Gallery online, or you can download the sample app and examine the code in the latest version of Omnis Studio.

Note that the JavaScript Components are available in Omnis Studio 5.2 and above. Download the latest Omnis Studio 5.2.2 90-day trial here.

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>