I was recently doing some work with the OutSystems Agile Platform where a customer wanted a table to have a "Total" row. This is a common request, but it is not obvious how to do it. The TableRecords widget supports a header row but not a footer row, and the RecordList objects that it works with do not understand the concept of aggregate data, unfortunately. The good news is that putting together a footer row and using it in your table is not difficult.
In my first attempt, I tried to do this with the ListRecords widget. Before the after the ListRecords widget, I put in Expressions where "Escape Content" was set to "No" and they had the HTML to start and end a table and insert the header row. Then, in the ListRecords widget, I used more unescaped Expressions to add in the tr and td tags around Expressions to display the data. This seemed like a viable approach, but it did not work out well. Once ListRecords gets processed, it spews out a lot of span tags that completely break the table.
My next approach was much more successful. I created a new Structure that contained an Attribute of type Boolean called "IsTotalRow" and another Attribute of type Record, with a type of the Entity that I was trying to display. In this case, I also added another Attribute called "RowTotal" for a total of the row's values.
Next, in my Screen Preparation, I did my usual query. I also added a temporary value of the new Structure type, a "TotalRow" variable of the same type, and another variable as a RecordList of the new Structure type. After the query, I used a ForEach to iterate over the results. On each iteration, I set the temporary variable's data record value to the current value from the query and set "IsTotalRow" to "False." I also added the current values to the TotalRow variable, and gave the temporary variable's "RowTotal" its proper value. After the iteration was done, I added up RowTotal for the TotalRow object, set IsTotalRow to "True", and appended it to the RecordList.
On the UI side of things, I bound a TableRecords widget to the RecordList I had created and added my columns. The only real trick was the styling. To make the Total row really stand out, I wanted it to be a different color — a dark grey background with bold, white text. To make this happen, I selected the row and in the Extended Properties, I created one called "style" and set its Value to an If that checked if the current row's IsTotalRow value was true. If it was, it would output CSS to style the row the way I wanted; otherwise, it would just output an empty string.
Voila! I had a Total row. In this project, it took a good deal of time to make a Total row because there was an existing table with a zillion columns and a lot of manual calculations happening under the hood. For a new project with basic data needs, this task should only take a few minutes.
Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.
Read my other TechRepublic posts about Agile Platform
- Creating a liquid layout for an Agile Platform theme
- Making a login system for OutSystems Agile Platform
- Generating unique strings in Agile Platform
- My application lifecycle in Agile Platform
- Write an advanced Excel data import with Agile Platform
- Making extensions in Agile Platform's Integration Studio
- Importing existing database schemas as Agile Platform entities
Justin James is an OutSystems MVP, architect, and developer with expertise in SaaS applications and enterprise applications.