Total for row and table

Hi there,

first of all, my skills in programming etc. are almost zero, but I would like to try a few things out and now I am stuck with a problem (which isnt probably one for everyone else here).

I would like to establish a table with a unit price and a unit quantity to calculate a total sum and then show the total value of the table. Very similar to the example under this link: https://plumsail.com/docs/forms-web/how-to/data-table-cases.html#calculate-total-for-a-row-and-the-whole-table

I have aligned the table and the column names to the example of this link and copy paste the code into the JS console, but nothing happened. Does somebody knows why or could potentially help? Again, probably an easy fix, but as I said, no coding experience/know-ledge here at all.

Thanks a lot!

Felix

Dear Felix,
Can you show me where you've copied the code to? Also, check browser's console for errors - these will help us determine what goes wrong. Screenshots would help!

thanks for the answer! is this sufficient?

image
here is the screenshot of the browser console

Dear @ffaupel,
The blue text is commented out. You either need to insert the sample outside of existing text, or overwrite it completely.

Nikita, as I expected, way too easy for you :slight_smile: It works well, thanks a lot for your support!!!

1 Like

@Nikita_Kurguzov may I bother you with another question?

For the overview of my table I have two additional fields I would like to add to the OrderTotal. its Shipping fees and other costs:

I tried to add them together with OrderTotal into the new field Total Sum on the right by adding a new variable that is called sumtotal and add orderTotal with the field OtherCostsVAT. However, I struggel with getting the value out of OtherCostsVAT and add them to orderTotal in order to calculate the new sumtotal (see code below):

The calculation to sumtotal works fine if I add e.g. orderTotal + orderTotal, so I think its because I cannot obtain the value out of the Other Cost VAT field. Would you have a fix for that?

Thanks again!!!
Felix

Dear @ffaupel,
You can just access these fields directly in your calculation. Can you copy and paste your code as text, so I can adjust it a little for you?

@Nikita_Kurguzov

fd.rendered(function() {
    //Disable OrderTotal field
    fd.field('OrderTotal').disabled = true;
    fd.field('TotalSum').disabled = true;
    //Make LineTotal column noneditable
    fd.control('DataTable1').columns[4].editable = function(){return false};
    fd.control('DataTable1').$on('change', function(value) {
        //variable to count Order Total
        var orderTotal = 0.0;
        var sumtotal = 0.0;
        //if there are records in the table
        var modifiedValue = null;
        if(value){
            //go through each one by one
            for (var i = 0; i < value.length; i++){
                //if this record has Amount and UnitPrice
                if(value[i].Amount && value[i].UnitPrice){
                    //set LineTotal to their product
                    var cost = value[i].Amount * value[i].UnitPrice;
                    if (value[i].LineTotal !== cost) {
                        if (!modifiedValue) {
                            modifiedValue = Object.assign({}, value);
                        }
                        modifiedValue[i].LineTotal = cost;
                    }
                }
                //add Total to the Order Total
                orderTotal += parseFloat(value[i].LineTotal);
                console.log(orderTotal);
                sumtotal += orderTotal + 'OtherCostsVAT';
                console.log(sumtotal);
            }
        }
        //here we refresh the table
        if (modifiedValue) {
            fd.control('DataTable1').value = value;
            fd.control('DataTable1').widget.refresh();
        }
        //we set Order Total field to sum of Totals
        fd.field('OrderTotal').value = orderTotal;
        fd.field('TotalSum').value = sumtotal;
    });
});

thanks a lot super helpful!!

Dear @ffaupel,
So you can do it like this:

fd.rendered(function() {
    //Disable OrderTotal field
    fd.field('OrderTotal').disabled = true;
    fd.field('TotalSum').disabled = true;
    //Make LineTotal column noneditable
    fd.control('DataTable1').columns[4].editable = function(){return false};
    fd.control('DataTable1').$on('change', function(value) {
        //variable to count Order Total
        var orderTotal = 0.0;
        var sumtotal = 0.0;
        //if there are records in the table
        var modifiedValue = null;
        if(value){
            //go through each one by one
            for (var i = 0; i < value.length; i++){
                //if this record has Amount and UnitPrice
                if(value[i].Amount && value[i].UnitPrice){
                    //set LineTotal to their product
                    var cost = value[i].Amount * value[i].UnitPrice;
                    if (value[i].LineTotal !== cost) {
                        if (!modifiedValue) {
                            modifiedValue = Object.assign({}, value);
                        }
                        modifiedValue[i].LineTotal = cost;
                    }
                }
                //add Total to the Order Total
                orderTotal += parseFloat(value[i].LineTotal);
                console.log(orderTotal);
            }
        }
        //here we refresh the table
        if (modifiedValue) {
            fd.control('DataTable1').value = value;
            fd.control('DataTable1').widget.refresh();
        }
        //we set Order Total field to sum of Totals
        fd.field('OrderTotal').value = orderTotal;
        fd.field('TotalSum').value = orderTotal + fd.field('ShippingFee').value + fd.field('OtherCostsVAT').value;
    });
});

Just need to change the Names for the two fields ShippingFee and OtherCostsVAT that you want to add to the sum.

@Nikita_Kurguzov

thanks so much, it works super well :)! Just one thing I noticed, when I add the inputs for Shipping Fee and Other Costs, it adds up, but when I change the Shipping Fee and Other Costs value, the Total Sum does not update.

Is there any code that would update the values from both fields once changed and refresh the total sum field?

Sorry for asking all of these questions, I hope you don't mind :slight_smile: Again, thanks so much!!

Felix

Dear @ffaupel,
You're right, the code only runs when the DataTable value changes. I would recommend to split the code inside of a function, and call it on change in either one of the fields or in the DataTable, like this:

function calculateTotal(){
    var value = fd.control('DataTable1').value;
    //variable to count Order Total
    var orderTotal = 0.0;
    var sumtotal = 0.0;
    //if there are records in the table
    var modifiedValue = null;
    if(value){
        //go through each one by one
        for (var i = 0; i < value.length; i++){
            //if this record has Amount and UnitPrice
            if(value[i].Amount && value[i].UnitPrice){
                //set LineTotal to their product
                var cost = value[i].Amount * value[i].UnitPrice;
                if (value[i].LineTotal !== cost) {
                    if (!modifiedValue) {
                        modifiedValue = Object.assign({}, value);
                    }
                    modifiedValue[i].LineTotal = cost;
                }
            }
            //add Total to the Order Total
            orderTotal += parseFloat(value[i].LineTotal);
            console.log(orderTotal);
        }
    }
    //here we refresh the table
    if (modifiedValue) {
        fd.control('DataTable1').value = value;
        fd.control('DataTable1').widget.refresh();
    }
    //we set Order Total field to sum of Totals
    fd.field('OrderTotal').value = orderTotal;
    fd.field('TotalSum').value = orderTotal + fd.field('ShippingFee').value + fd.field('OtherCostsVAT').value;
}

fd.rendered(function() {
    //Disable OrderTotal field
    fd.field('OrderTotal').disabled = true;
    fd.field('TotalSum').disabled = true;
    //Make LineTotal column noneditable
    fd.control('DataTable1').columns[4].editable = function(){return false};
    fd.control('DataTable1').$on('change', function() {
        calculateTotal();
    });
    fd.field('ShippingFee').$on('change', function() {
        calculateTotal();
    });
    fd.field('OtherCostsVAT').$on('change', function() {
        calculateTotal();
    });
});

@Nikita_Kurguzov it works perfectly fine, thanks again so much for your help!!

1 Like