What is the best way to show the subtotal of child list items

I have a parent list that relates to three child lists. I want to show the subtotals of all the list items when looking at the parent list. I have added three fields to hold the subtotals of the child lists.

What is the best way to get the subtotals?

I have tried to get the "total" from the list control but I am having trouble isolating the total in the dom.
I have considered using pnp to query the child lists and get the totals, but that doesn't work on the New form.

Any recommendations?

This is how I ended up doing it but if there is a better way I would like to hear it.

fd.spRendered(function () {

function tallyTotals() {
    var items = 0;
    var labor = 0;
    var vendors = 0;
    var total = 0;
    
    fd.control('TableItems').ready().then(() => {
        fd.control('TableItems').widget._data.forEach(function(d) {
            items += parseFloat(d.Cost.replace(/[^0-9-.]/g, ''));
            fd.field('Total_x0020_Item_x0020_Costs').value = items;
        });
    });
    
    fd.control('TableLabor').ready().then(() => {
        fd.control('TableLabor').widget._data.forEach(function(d) {
            labor += parseFloat(d.Cost.replace(/[^0-9-.]/g, ''));
            fd.field('Total_x0020_Labor_x0020_Costs').value = labor;
        });
    });

    fd.control('TableVendors').ready().then(() => {
        console.log(fd.control('TableVendors').widget._data);
        fd.control('TableVendors').widget._data.forEach(function(d) {
            vendors += parseFloat(d.Amount.replace(/[^0-9-.]/g, ''));
            fd.field('Total_x0020_Vendor_x0020_Costs').value = vendors;
        });
    });
    
    total += fd.field('Total_x0020_Item_x0020_Costs').value;
    total += fd.field('Total_x0020_Labor_x0020_Costs').value;
    total += fd.field('Total_x0020_Vendor_x0020_Costs').value
    
    fd.field('Total_x0020_Cost').value = total;
    
    var options = { style: 'currency', currency: 'USD' };
    
    $('.total').html(new Intl.NumberFormat('en-US', options).format(total));
    
}

fd.control('TableItems').ready().then(tallyTotals);
fd.control('TableLabor').ready().then(tallyTotals);
fd.control('TableVendors').ready().then(tallyTotals);

});
1 Like

Dear @smithme,
If it works - that's great! And it seems like a very solid piece of code. Definitely useful for calculating Total.

For subtotals, for each individual List or Library, you could've also utilized standard SharePoint list view total calculation:

This is fully supported by List or Library control:

But your approach works just as well!

1 Like