DFFS sum multiple fields in a totals field

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

This topic contains 12 replies, has 3 voices, and was last updated by  Maciek Grischke 1 month, 1 week 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:

    jQuery("#dffs_NumField1 input, #dffs_NumField2 input").on("keyup",function(){
        var str = jQuery(this).val().replace( /[^0-9.]/g, "" );
        jQuery(this).val(str);
        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

    • This topic was modified 1 month, 3 weeks ago by  Alexander Bautz. Reason: Changed from "change" to "keyup" on the event triggering the function setFinalCost
  • #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, 3 months ago by  Zaruba.Ivan.
    • This reply was modified 3 years, 3 months 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

  • #25501

    Maciek Grischke
    Participant

    Hi Alexander,

    I replicated the issue in my test site. I added the log to the code, but the log (or the code) is not triggering until I delete one of the numbers with an X icon. X icon at the end of the field. Deleting the number with a backspace or delete keys is not doing anything. Weird.
    The X icon seems to be only available in Edge, I don’t see it in any other browser.

    Also, the calculation only works when I click away from the number field, not on “keyup” – this applies to all browsers, but that’s not an issue.

    Please note, the “Total” field is a text field, but I just changed it to a number field and the same behaviour occurs.

    The list in my test site is called CalcTest

    /CalcTest/AllItems.aspx
    
    • #25512

      Alexander Bautz
      Keymaster

      Hi,
      I looked at your test list and modified the code to use “keyup” instead of “change” – not sure why Edge doesn’t trigger a change event when the input is changed though.

      PS: You have some errors in another part of the code – look at the console when loading the form in Chrome and you find a few red messages.

      Alexander

    • #25654

      Maciek Grischke
      Participant

      Thanks for this, it works great in all browsers.

      In relation to those red messages, I think they’re not related to the form itself. I think it relates to some broken scriptlinks or other JS files I previously used on that test site.

You must be logged in to reply to this topic.