Posted on October 28, 2022
Requests for new business applications often begin with basic lists of data — a perfect use case for a Nitro App Builder grid widget — then grow from there. In some cases a requirement may entail allowing users to click on multiple records in the list, then take an identical action against all the selected records at once.
For instance, your marketing department might be seeking a list of active customers, from which a user would select a bunch of customers to send a special promotion en masse.
For this scenario, a grid widget with checkbox selections enabled might be ideal.
It’s relatively simple to activate a checkbox column on a grid, and to add filters that allow users to limit grid records to those most pertinent to their objective. Users can then scroll through the filtered list, individually check off the desired records and click a button to act on them (see this prior blog post for an example of this concept in action).
But what if you could take things a step further and “pre-select” applicable rows that you know the user is likely interested in acting upon, based on some value in each row? This could potentially reduce the amount of tedious hunting and clicking your users must do. And as of the latest Valence build, pre-selecting rows is now an option in your grid apps!
This pre-selection concept is referred to in NAB as “Auto Select” and is activated in the App view of a Grid or Edit Grid widget. To access the configuration to turn on checkbox selections and set the auto select conditions, hover over the grid widget and click on the cogwheel, as illustrated here:
Clicking on the Condition button brings up a special window with two tabs for configuring the checkbox column. The first tab, labeled “Enable if”, allows you to specify conditions for when a row’s checkbox can be checked. The format of the expression should be in standard JavaScript, with column names from the data source specified in curly brackets. You can also pull in global App Variable values, which should be specified in hard brackets.
In the example below, only rows with a customer number over 1000 and a country other than “Canada” will be selectable by the user. Otherwise the checkbox will be disabled.
To set up auto selection (meaning, to pre-select rows for the user), switch the window to the “Auto Select If” tab and you’ll see a space to enter a separate JavaScript expression for determining which rows should be selected (or checked) when the grid is loaded. In the example below, any customers in Germany with sales below a value specified in a “dollarThreshold” app variable will be auto-selected. The “dollarThreshold” app variable in this case might be coming from an RPG program, or set in a field or filter somewhere else in the app.
As described in the blog post referenced earlier, you’ll also want to add a button to your grid to process the row selections in a back-end RPG program. In this example, we’ve added a button called “Send Marketing Message” to the grid, which will send all the selected rows to an RPG program called VXMKTMSG…
Note that while you’re inside the NAB Designer app, the checkbox column is not rendered after being activated. But once you save and launch the app you and your grateful users will definitely see it. Here you can see all the German customers with under $50,000 in sales have been automatically selected…
Imagine the ways you can put this feature to work in your own apps to reduce the amount of hunting and clicking your users must do!
CategoryTip of the Month
