In addition to showing heaps of scrollable business data, grid apps built with Valence’s Nitro App Builder tool can be configured to include action buttons that make them even more useful. Introduced in Valence 5.2, icon columns are columns with clickable buttons that can appear on the left and/or right edge of each grid row. Users can click on these intuitive buttons to perform any common behavior, such as opening a drill-down window, launching another app, calling an RPG program, etc.
For all their single-click handiness, there will likely be times when you will want to disable or hide icon column buttons, such as when the corresponding action would not be appropriate for a particular row, or the user is not authorized to the underlying function. This month’s tip explores the available options for controlling these elements, including one that was recently introduced in Valence 6.3.
First a quick recap on icon column setup… Keep in mind that since these buttons are added to grids at the application level, you do not add icon columns the Grid Widget, but rather to the App, under Behaviors. The icon columns can be aligned on the left and/or right side of the grid. In the example below we have six icon columns aligned to the right edge in the NAB Designer’s App view…
The configuration in Behaviors for this example might look something like this:
Note that in the screenshot above we’ve got a Feature Name of “editParcels” assigned to four of the six icon columns, which brings us to our first tip for controlling which icons are visible across all rows. By enabling or disabling this feature, or by altering the true/false value of its corresponding app variable (automatically created with a prefix of “nabFeature” – so in this case the app variable would be called “nabFeatureeditParcels”), we can globally show or hide icons across all rows of the grid. With editParcels disabled, only two buttons will show for the user, distributed proportionally across the space allotted for the icon columns…
Let’s quickly recap the various ways in which you could turn on or off the editParcels feature:
- In the App Variables section, you could assign an initial value of true or false to, in this case, “nabFeatureeditParcels”
- In any Execute Script function within Behaviors, you could use setAppVar(‘nabFeatureeditParcels’,xxxxx), where xxxxx is true or false
- In an RPG Startup or Form Helper program, you could use enableFeature(‘editParcels’) or disableFeature(‘editParcels’), perhaps based on the user’s authority
- In a Click, Filter, or Validation helper program you can include a feature setting in the response via SetResponse(‘enableFeature’:’editParcels’) or SetResponse(‘disableFeature’:’editParcels’)
- In most RPG programs called from NAB, you could respond with an adjustment to the feature’s app variable, in this case either via SetResponse(‘appVar’:’nabFeatureeditParcels’:’true’) or SetResponse(‘appVar’:’nabFeatureeditParcels’:’false’)
Now, in most cases you will want your icon column buttons to be controlled based on contents of the corresponding row itself. You can either completely hide a button, or just disable it. While hiding a non-applicable button may make the grid appear less busy, sometimes leaving it visible but disabled can be preferable, as it serves as a cue to the user that there’s a reason making it not possible to perform a certain function (i.e., the user cannot click on a “delete” button for an invoice that has already been paid).
This kind of conditional display or enablement is handled inside Behaviors on the definition of each icon column button, inside the Condition tab…
As you can see in this screenshot, on the Condition tab you have two possible conditions you can apply — one for enabling the button when true, or disabling when false; and one for showing the button when true, or hiding when false. You can set both if you like, bearing in mind that a hidden button will always trump an enabled one. Column values from the corresponding row can be referenced by putting the column name inside {curly brackets}, as is done in the example above with the ACTIVE flag column. For added convenience, clicking on the appropriate Available Fields will automatically place the column name into the end of condition expression in which your cursor is located. Note that you can also pull in app variable values as well, which are referenced in the condition using [square brackets].
Keep in mind that these expressions must be in standard JavaScript format, which basically means you must use && for “and”, || for “or”, === for equals, != for does not equal, and all your standard less than/greater than operators.
Finally, what if you wanted to programmatically hide all the defined icon columns and reclaim that real estate for data columns in your grid? For that you would use a new Valence NAB 6.3 linked variable, accessed in NAB Designer by hovering over the appropriate grid widget and clicking on Link…
In the subsequent pop-up, you would then click on the “Hide Columns” section and look for an app variable called either nabIconColLeft or nabIconColRight (depending on which side of the grid your icon columns are located) and set it to an appropriate app variable. When the corresponding app variable is set to false, the icon column for the appropriate side will be removed entirely.
So with these tips in mind, hopefully you can find ways to add some single-click-action spunk to your grid applications, with icon column buttons appropriately hidden or disabled.