DFFS sum multiple fields in a totals field

Forums Dynamic Forms for SharePoint DFFS sum multiple fields in a totals field

This topic contains 9 replies, has 3 voices, and was last updated by  Alexander Bautz 6 days, 11 hours ago.

  • Author
    Posts
  • #11033

    Alexander Bautz
    Keymaster

    I got this request from Josh:

    Hi Alexander,

    I was wondering if there was a way to perform a calculation on the fly on a DFFS form.
    So if I fill out 2 number fields that it will add those together and put the value into another “Total” field. So as someone is filling out the form it can add up the numbers they input as they input the numbers.

    Hope that makes sense.
    Thanks!

    Here is an example of three columns: NumField1, NumField2 and NumField3 that are summed up in a column “Tot”.

    First add the columns to the form, then add this code to the Custom CSS:

    input.fieldValueUpdated{
    	background-color:green;
    	color:#ffffff;
    }

    Then add this to the Custom JS:

    $("#dffs_NumField1 input, #dffs_NumField2 input, #dffs_NumField3 input").change(function(){
    	setFinalCost();
    });
    
    function setFinalCost(){
    	var a, b, c, aa, bb, cc;
    	a = Number($("#dffs_NumField1 input").val());
    	b = Number($("#dffs_NumField2 input").val());
    	c = Number($("#dffs_NumField3 input").val());
    	aa = !isNaN(a) ? a : 0;
    	bb = !isNaN(b) ? b : 0;
    	cc = !isNaN(c) ? c : 0;
    	if(isNaN(a)){
    		alert("Number format error in \""+spjs.dffs.fieldData.NumField1.disp+"\"");
    	}
    	if(isNaN(b)){
    		alert("Number format error in \""+spjs.dffs.fieldData.NumField2.disp+"\"");
    	}
    	if(isNaN(c)){
    		alert("Number format error in \""+spjs.dffs.fieldData.NumField3.disp+"\"");
    	}
    	$("#dffs_Tot input").addClass("fieldValueUpdated").val(aa+bb+cc);
    	setTimeout(function(){
    		$("input.fieldValueUpdated").removeClass("fieldValueUpdated");
    	},1000);
    }

    Please note that you must ensure the field names are correct.

    I could have minimized the code by adding the fields to an array, looping over then to avoid repeating the code three times, but the readability is better like this.

    Alexander

  • #11058

    Zaruba.Ivan
    Participant

    Hi Alexander,

    excellent code. Thank You. It helped me a lot. How can I avoid error alert in EditForm, when it reloads original values with thousands separator?

    Ivan Zaruba

  • #11064

    Alexander Bautz
    Keymaster

    Hi,
    You must change the lins that look up the value – like this example:

    a = Number($("#dffs_NumField1 input").val());

    like this (assuming the thousands separator is a comma):

    a = Number($("#dffs_NumField1 input").val().split(",").join(""));

    Alexander

  • #11080

    Zaruba.Ivan
    Participant

    Hi Alexander,
    thank You, but there is a still NaN error.
    It works when I replaced lines that look up the value – like this:

    a = Number(parseFloat($("#dffs_NumField1 input").val().replace(/\s/g, "").replace(",", ".")));
    b = Number(parseFloat($("#dffs_NumField2 input").val().replace(/\s/g, "").replace(",", ".")));
    c = Number(parseFloat($("#dffs_NumField3 input").val().replace(/\s/g, "").replace(",", ".")));

    Ivan

    • This reply was modified 3 years, 1 month ago by  Zaruba.Ivan.
    • This reply was modified 3 years, 1 month ago by  Zaruba.Ivan.
  • #11120

    Alexander Bautz
    Keymaster

    I’m glad you figured it out.

    Alexander

  • #25202

    Maciek Grischke
    Participant

    Hi guys,

    is it possible to make the Total field read-only?

  • #25219

    Alexander Bautz
    Keymaster

    You should be able to set it readyonly in a rule and then change this line of code:

    $("#dffs_Tot input").addClass("fieldValueUpdated").val(aa+bb+cc);

    to this:

    setFieldValue("Tot",aa+bb+cc);

    The setFieldValue function should update a readonly field value when it is changed.

    Alternatively hide the Tot field entirely and use a HTML section with this format to automatically update it when changing the value with setFieldValue:

    {{Tot}}

    Alexander

  • #25228

    Maciek Grischke
    Participant

    Thanks! This worked great as usual 🙂

  • #25324

    Maciek Grischke
    Participant

    Hi again,

    I just noticed that the calculation does not work in Edge. Whether it’s read only or editable.

    Any idea why and do you think it’s fixable?

    It works fine in Forefox, Chrome, IE and even Opera, but not Edge and we know Edge is now being forced on users so I’m worried I will be getting complaints at some point.

  • #25333

    Alexander Bautz
    Keymaster

    Hi,
    I’m not aware of any incompatibility with Edge can you try adding some alerts or console.log statements to your code to try to pinpoint where it fails?

    PS: If you are able to recreate it in the testsite I have access to I’ll take a look there.

    Alexander

You must be logged in to reply to this topic.