Not too long ago, I was discussing the “movable columns” feature of Profound UI’s Subfile Grid widget with a customer. They liked this feature, but wondered how they could show totals under their subfile and have them move along with the column automatically.

This seemed like a great idea, but I didn’t think we had a feature to do that. After all, when someone codes totals, they aren’t typically part of the subfile itself, instead they are just output fields that are coded underneath the subfile. How could they move along with the columns? Still, I thought this would be a very useful feature, so I made a note to look into how this could be done.

Here’s what I discovered: The feature was already there! All you have to do is set the id property of the output field to match the id of the corresponding subfile column followed by an underscore character, and then the word total.

Consider this sample screenshot taken from the Profound UI Visual Designer:

In this subfile, we have fields named TotSales and TotRefunds which contain totals calculated by the RPG program as it loads the subfile. These fields aren’t part of the subfile itself, naturally, they are just output fields that are placed below the subfile.

If I enable the movable columns property in the subfile grid, the user can drag the subfile columns to another spot on the screen, but by default, the totals fields are not part of the grid, so Profound UI does not know that they should be moved as well. We can fix this by changing the id property of these total fields.

To do that, first I need to know what the id properties of the ORAMOUNT and ORREFUND fields are. I can click on them in the Visual Designer to check this. In my example, they are set to Amount and Refund, respectively. To make my totals move along with them, I can set the id properties of the corresponding TotSales and TotRefunds fields to Amount_total and Refund_total. It’s important that I use the same capitalization in the total fields that I did in the subfile fields because the id property is case-sensitive.

That’s it! Once I’ve set the id properties accordingly, the fields automatically move when the columns are moved. Profound UI does this by adjusting the left property of the total widgets at run-time. It simply adds or subtracts the same amount from the total widget’s position that the column moved, so if the totals are lined up with the original columns, they’ll be moved to match.

In Summary:

1. Click on the grid widget and change movable columns to true. And maybe also set the persist state property to true so that the column positions are remembered after the user exits the screen.
2. Look up the id properties of the ORAMOUNT and ORREFUND fields. Or, if they are using default values (like OutputField1) then set them to appropriate values. I used Amount and Refund, respectively, in my example, but you can use any name you like.
3. Set the id properties of the total fields (TotSales and TotRefunds in my example) to the same id names as the subfile fields they correspond to, except add a suffix of _total. Make sure to match the upper/lower case letters exactly, as id properties are case-sensitive.

I've also added a page to the Profound UI documentation for this feature.

Good luck, and happy totaling!