Hello world!
I have an issue when building a Data Grid that requires multiple aggregate (totals) rows. Plus, I am trying to have a column which may have negative values to be presented in red ("text-red") but also as an absolute value 'If(value < 0, Abs(value) with text-red css class, value)'.
The table should look as the following given example:
What I have so far:
The first objective is to attain the 2 last rows from the example (Contingency + Total) already over the Base Total I have from the standard SetColumnAggregate client action triggered in the OnAfterFetch
I have
I fetch these entities in the data action and calculate the rest of the info seen in the grid by 'new attributes' already calculated in the base/standard aggregate before being converted into grid data
Additionally, the second objective is to get the negative values as red. For the currency columns I can get away with the currency stuff being in parenthesis, thus allowing me to pass negative values in the binding
For the hour difference I would need in the binding something like If( HourDifference < 0, Abs(HourDifference) with text-red class, HourDifference ).
I was thinking that I may add an extra column to the aggregate defining which class(ess) to apply or when to apply based on a boolean.
Let me know if any additional info is required (cannot share an OML sample).
Adding Multiple Aggregate Rows
The SetColumnAggregate client action in OutSystems Data Grid allows you to define aggregate functions (like Sum, Average) for specific columns. However, to display multiple custom aggregate rows (e.g., Contingency, Total) beyond the default aggregate row, you'll need to implement a workaround:OutSystems
Calculate Aggregates Manually:
In your data preparation logic (e.g., in the OnAfterFetch event), calculate the necessary aggregate values for each custom row you want to display.
Create separate records representing each aggregate row (e.g., one for Contingency, one for Total) with the calculated values.OutSystems
Append Aggregate Rows to Data Source:
After fetching and preparing your main data set, append the custom aggregate rows to the data source bound to the Data Grid.
Ensure that these rows can be distinguished from regular data rows, perhaps by setting a specific flag or identifier.OutSystems Success+4outsystems8.rssing.com+4OutSystems+4
Style Aggregate Rows Differently:
Use the OnCellRender or OnRowRender events to apply distinct styles to the aggregate rows, making them visually stand out.
For example, you can apply bold text or background colors to differentiate them from regular data rows.
This approach allows you to display multiple aggregate rows within the Data Grid, each representing different calculated totals.
Formatting Negative Values in Red
To display negative values in red within the Data Grid:OutSystems
Use Cell Rendering Events:
Implement the OnCellRender event for the Data Grid.
Within this event, check if the cell's value is negative.
If it is, apply a CSS class (e.g., text-red) to the cell to change its text color.OutSystems
Display Absolute Values:
If you prefer to display the absolute value (i.e., without the negative sign) while still indicating negativity through color:
In the OnCellRender event, modify the cell's displayed value to its absolute value.
Apply the text-red class to indicate that the original value was negative.
This method ensures that negative values are clearly indicated in red, enhancing the readability and user experience of your Data Grid.Internet Archive
For more detailed guidance on using the OutSystems Data Grid, you can refer to the official documentation:OutSystems Success
How to use the OutSystems Data Gridhttps://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/interaction/outsystems_data_grid/how_to_use_the_outsystems_data_grid/
Additionally, exploring advanced samples can provide insights into customizing the Data Grid further:outsystemsui.outsystems.com
Advanced Samples - OutSystems UIhttps://outsystemsui.outsystems.com/OutSystemsDataGridWebSample/AdvancedSamples.aspx