Omnis Technical Note TNJC0001July 2013

JavaScript Components: Complex Grid

for Omnis Studio 6.0 or above

The complex grid is a powerful and versatile JavaScript component for creating highly functional, feature rich forms for detailed data analysis and data entry for your web and mobile applications. A Complex Grid can display multiple rows and columns of data taken from a list variable specified in the $dataname property of the control. To create a complex grid you place other controls in the row and header sections of the complex grid control, including standard entry fields, droplists, buttons, and checkboxes. A complex grid is a container field having its own $objs group containing the objects inside the grid control: therefore you can reference the objects in a complex grid via the $objs group.

The $dataname of each component you place in the complex grid must correspond to a column in your list variable supplying the data to the grid. You can use a $construct method behind the complex grid control to build the list data to populate the fields in the complex grid (see below). You can place event methods behind the embedded controls (rather than the grid field itself) to react to user input and clicks within individual fields/cells in the grid. For example, you can have a button in each row of the grid which when clicked triggers a method that performs an action based on the row clicked.

A complex grid is used in the Webshop sample app which is available in the Welcome window in Omnis Studio 6.x. To try the app, download a trial copy of Omnis Studio 6.x, click on the New Users button in the main Omnis toolbar, click on the ‘Explore Applet Libraries’ button, and open the ‘Webshop’ app. The sample app uses a complex grid in the main product remote form to display a list of products. Individual fields for the picture, name, description, price/size of the product are added to the first line of the complex grid; when the form is opened on the client and the data is loaded into the grid, these fields and controls are repeated for each row in the data list (one row per product).

Complex grid

The $dataname of the complex grid is set to iProductList which is built from a table class T_Products which is linked to a schema class sProducts. A $construct method is placed behind the complex grid that builds the list needed for the complex grid data.

; $construct of complex grid control in jsShop form
Do iProductList.$definefromsqlclass($tables.T_Products)
Calculate whereClause as con('WHERE product_group = ',kSq,'Appetizers',kSq)
Do $cfield.$build(whereClause) ;; calls $build

The $construct method behind the table needs to be triggered when the form is opened (this does not run automatically like the form construct), so a message is sent from the $construct of the form to the fields in the form, which in this case includes the method behind the complex grid. The command line in the form $construct is:

Do $cinst.$objs.$sendall($ref.$construct()) ;; triggers all field specific $construct methods

The construct of the complex grid also calls a $build method to build the data.

; $build method behind complex grid control in jsShop form
Do iProductList.$select(pWhereClause,' ORDER BY product_isfood desc')
Do iProductList.$fetch(kFetchAll)

When the form is opened and the complex grid $construct method is run, the product list is built from database. The data is displayed in the various fields embedded in the complex grid with each product shown on a separate line in the complex grid.

Complex grid

There are three order buttons placed in the row of the complex grid; they are repeated for each product in the list and allow the end user to order different sizes of product, such as a small, medium, or large drink or pizza. Each of the buttons has a simple method behind it that passes a number to the process_order class method; the first button sends value 1, the second button value 2, and the third button value 3.

; ‘Order now’ button method
On evClick
Do method process_order (1)

The process_order method receives the numeric parameter sent by the button event method, adds the appropriate product to the Order list and enables the Check out button. You can examine the other objects in the form and the methods behind them.

Click here to download a trial copy of Omnis Studio 6.x and try out the Webshop app. Or you can visit the JavaScript Apps Gallery to try out further components.