By far the most popular UI component in the Valence modernization framework is the subfile-on-steroids known as the Ext JS grid.
And for IBM i developers and super users alike, there is simply no faster way to roll out a web or mobile application exploiting this powerful functionality than through the grid widget in Valence’s Nitro Query tool. In recent weeks we’ve been feverishly adding bells and whistles to the grid widget, and this month’s tip focuses on elements pertaining to column rendering and summary functions (please be sure you’ve downloaded the latest Valence build to ensure what’s described in this write-up aligns with your installation). As long as you know where your IBM i data is stored — or have an RPG program that pops the data you need into a work table — then with Nitro Query’s grid widget you can be off to the races in no time building grid apps for your users. Once you’ve defined a data source and created a grid widget over it, the process of changing the appearance or adding special functionality to individual columns is handled in the “Columns” section of the grid configuration. It is here that you can click on any column label to overwrite the heading.
Tip #1: Rearrange your columns by simply dragging them up or down in the sequence
Sometimes the simplest things are not intuitive until they’re pointed out! If your grid’s data source fields aren’t selected in the same order you want them rendered, simply drag them vertically into the desired spot and they will rearrange horizontally on the preview panel.
Tip #2: Use HTML tags in your column headings
Whenever you have a column with a verbose heading, you can of course abbreviate it — something we’re quite accustomed to in the green screen world! But a better option in the web world is to insert line feeds and other HTML tags to take advantage of the browser’s built-in features, thereby making the column heading easier to understand. For example, let’s say your data source had a numeric column with a header of “Total Units Sold, Domestic Only”. Rather than making it “Total Sold, Dom Only” or truncating the heading or wasting a lot of space by leaving it as is, you could change it to “Total Units Sold<br><i>Domestic Only</i>”. This two-level header gives you the benefit of retaining the full meaning of the column heading while at the same time better utilizing the space.
Tip #3: Be sparing with the sorting feature on huge files
The “Sortable” column feature is a powerful and popular feature, as any column with the box checked can be sorted by the user simply clicking on the column header. But bear in mind that its performance is contingent on the size of the back-end data and the indexes available. If you have a file with millions of records, you may want to disable sorting on any columns that do not have appropriate indexes that can be utilized by the SQL engine.
Tip#4: Use “flex” column widths, rather then specific pixel widths, when possible
If your grid has a reasonable number of columns (meaning few enough that it’s possible to fit them all into the browser width without scrolling — typically around a dozen columns or less), then you can make the grid appearance much cleaner by having your columns automatically scale to fit the window size. In the Width/”Flex” configuration, a number of 10 or less is treated as a relative “flex” size, whereas a number greater than 10 is treated as an explicit pixel width. For example, say you have a product master grid consisting of a product number, a description, a unit of measure and a price. You could use flex settings of 2, 6, 1, 2 respectively to tell the browser that the product number and price should be the same width (2 and 2), while the description (6) is three times as big and the unit of measure column (1) is half as big. Put another way, with the flex settings totaling 10, the relative size of the product number and price will be 2/10ths (20%) of the width of the grid; the description will be 6/10ths (60%); and the unit of measure will be 1/10th (10%). This way, if the user resizes the window the grid columns will stretch or shrink accordingly. This is a handy feature to accommodate situations where various users are running your app on screens or devices of different sizes. Note that for added configurability it is also possible to have a mix of both flex (width <= 10) and fixed-width (width > 10) columns.
Tip #5: Add renderers and summary functions to the columns
Figure 1: Accessing the FORMAT panel
Figure 2: Changing alignment, column formatting, summary function
Stay tuned for more tips on Nitro Query grids as we continue to roll out new features in the months ahead!