PowerApps Portal: Grid Total

Author: Elizabeth Akinfiieva, Senior Power Platform Developer

Working with the Power Apps Portal sometimes requires customizations that are not implemented by the standard settings. Implementing PCF control is too time-consuming, compared with relatively small JavaScript modifications on the Web Page. In this article, I am sharing an example of adding a total line to summarize sales.

To begin with, each grid/view on a Web Page is rendered as an HTML table. For each table row, there are several columns (table data). You can find the needed column by attribute “data-attribute” – which contains the schema name of the field as a value.

So, the easiest way to calculate the total of the column is to go through all rows in the HTML table and sum the Amount values.

Here is an example of the table:

In the current table the selector for the table would be .view-grid, and to get the data from the Amount field I use $(“[data-attribute=’la_amount’]”). The sum of all amounts is calculated this way:

var totalAmount = 0;
$("[data-attribute='la_amount']").each(function(){
   totalAmount+=Number($(this).attr("data-value"));
})

Now the total row should be added to the table.

$(".view-grid").find("tbody").append("<tr id='totalRow'></tr>");

In order to repeat the column sequence, we can go through the columns of the table header or first table body row. Put total amount or empty string dependent on the data attribute:

$(".view-grid").find("tbody > tr:first").children('td').each(function(){
                var totalRow = $(".view-grid").find("tbody > tr:last");
                var currentTd = $(this).attr("data-attribute");
                switch (currentTd){
                case "la_name":
                    totalRow.append("<td>Total</td>");
                    break;
                case "la_amount":
                    totalRow.append("<td>"+totalAmount+"</td>");
                    break;
                default:
                    totalRow.append("<td></td>");
                    break;
                }
            })

And the final step is to render the total row after the table is loaded. I used the setInterval function to wait for the table be contain at least one row. So the final code is like this:

var totalRenderInterval = setInterval(function(){
        if($("[data-attribute='la_amount']").length>0)
        {
            var totalAmount = 0;
            $("[data-attribute='la_amount']").each(function(){
                totalAmount+=Number($(this).attr("data-value"));
            })
            $(".view-grid").find("tbody").append("<tr id='totalRow'></tr>");
            $(".view-grid").find("tbody > tr:first").children('td').each(function(){
                var totalRow = $(".view-grid").find("tbody > tr:last");
                var currentTd = $(this).attr("data-attribute");
                switch (currentTd){
                case "la_name":
                    totalRow.append("<td>Total</td>");
                    break;
                case "la_amount":
                    totalRow.append("<td>"+totalAmount+"</td>");
                    break;
                default:
                    totalRow.append("<td></td>");
                    break;
                }
            })
            clearInterval(totalRenderInterval);
        }


    },100);

Put the code into a content snippet:

Then, include it into the Web Page code:

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; text-align: left; min-height: 100px;">
  <div class="container" style="display: flex; flex-wrap: wrap;">
    <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">{% include 'entity_list' key: 'Product Sales' %}</div>
  </div>
</div>{{snippets["ProductSalesScript"]}}

The final view now has a Total line when you navigate to the Web Page:

Hope this will help you to customize views in the Power Apps Portal!