Assembling multiple columns of business data into a grid using Nitro App Builder is so quick and simple that developers can easily overwhelm or even intimidate their users with apps containing huge walls of data. For the most optimal user experience, it’s important to present large lists of information as cleanly and clearly as possible.
There are many ways to organize a large volume of grid widget data in an intuitive fashion, such as by activating grouping, incorporating drill-down behaviors, or even simply allowing users to move/hide/resize columns to their liking. Valence 6.1 brings yet another tool to the fray, which is to incorporate “Super Columns” — also known as containers — that span across the top of the grid to better distinguish one group of columns from another. Using this feature makes it easier for users to understand the information being presented.
To illustrate this concept, consider a typical customer master file that contains multiple fields making up the customer’s address (street address, city, state, country, etc). Without any differentiation from the other columns, the address info can kind of get lost in the shuffle in the wall of data. Such a grid over the DEMOCMAST example file included with Valence might look something like this:
With the new “Super Columns” concept introduced with Valence 6.1, we can make the address columns stand out out more readily by placing them under a single “Customer Address” label that spans across the top. To do this, simply click the “Container” button at the bottom of the field list, add a label, then select the columns you want to include below it:
Once you hit OK, you’ll see the new container row in the list, with the underlying columns listed directly below it. You can rearrange the columns underneath the Super Column by dragging and dropping into the desired position. You can also drag columns into or out of the container in the same manner:
The end result of this configuration is a grid in which the address-related columns clearly pop out from the other columns in the app:
You can insert multiple Super Columns into any grid so families of related columns can be clustered into logical groups. This makes the contents of the grid — even ones with multiple columns and horizontal scrolling — much easier for users to interpret.