Business systems are replete with lists of data, many of which entail users editing, adding or removing records in one or more underlying physical files. Conventionally, a maintenance app for, say, basic customer info would be initially presented to users in the form of a grid. Users would then click on a row to bring up a pop-up window, where the respective data is arranged in a form for editing.
In recent years, online spreadsheets have become a more popular mechanism for maintaining lists due to their inherently collaborative and user-friendly nature. In such setups, when a user sees some information they want to edit, they simply click on the cell and change it right there. This requires considerably less effort than having to wade through a pop-up window to find the field corresponding to the cell they want to change.
Effective with Valence 6, this kind of cell editing is now possible in your Edit Grid apps, and it’s super easy to set up.
To illustrate by example, let’s create an Edit Grid app over the DEMOCMAST file included with Valence. The first step is to go into Nitro App Builder (NAB) and create a data source over the file. If you’re not already familiar with creating data sources. A simple SQL-based data source selecting all the columns will do — i.e., SELECT * FROM DEMOCMAST.
Next, create an Edit Grid widget over the data source (only be sure to select the “Edit Grid” widget instead of the “Grid” widget). Flip to the Edit tab and enable editing on the appropriate columns. The configuration should look something like this:
If you were to save the widget and pop it into a new app, the result will look something like this when a user clicks on a record to make a change:
In previous versions of Valence, this “pop up window” approach to editing records was the only option available. But with Valence 6 we can now configure the grid so users can edit individual cells or rows in-line, instead of having to navigate through a pop up. Let’s see how…
Back to the Edit tab configuration, in-line editing can be activated in a drop-down combobox in the upper-right. If you set it to “Cell Edit” then your users will be able to edit individual cells.
The resulting app then looks like this when a user double clicks on an editable cell:
In this configuration, each time a user changes a cell and hits ENTER or TAB then the underlying record is immediately changed. So changing five cells would result in five separate saves to the underlying file.
In some cases you may prefer to defer record updates until the user explicitly indicates they’re done editing the row. To do this, select “Row Edit” in the configuration drop-down, which will result in an edit mode that looks like this:
Note that when “Row Edit” is selected in the NAB configuration, you have the option of checking an “Auto Update” box. When this box is checked, the row update will be applied automatically whenever the user tabs out of the last column on the row. Otherwise the user must click the Update button to trigger the record adjustment.
In all configurations you can specify an RPG program to perform edit checking on whatever the users enter by placing the program name in the Validation Program field in the upper right of the Edit tab. Example source member EXNABVAL provides an RPG template you can follow.
For a more in-depth overview of the Grid and Edit Grid features introduced in Valence 6, be sure to check out our recent Developer Diaries video.