Thousands Separator

Forms
1

Hi, I have a form with 7 currency fields. The form-filler will input one value, and the other 6 are calculated by javascript. It works & looks good on the form, but the result document doesn't take the formatting with the thousands separator. In the javascript, I'm using .toString() to convert the values. So part 1 of my question is: Can I set a currency field to a text value?

The token in the document is ${{FieldName}} so I'm not worried about the $, but I can't get any of the regex to work to insert a ',', so I'm getting 100000 instead of 100,000

Should I format in the form or in the document?

Thanks!

2

Hi @EHaya,

Formatting the values in the form seems much simpler. Please try using .toLocaleString() instead of .toString() when converting the values to text, that should do the trick.

3

Need more help on this - I put the calls to the formatting function in the 'before save' function.

calling the function 'on change' of the field didn't work - the reg ex would insert a comma after the first 3 digits, but then a comma after every digit. I also do calculations based on the first value, so I can't convert to string right away.

Basically my form goes like this: form filler enters a value in the currency field 'BaseSalary'. This calls the function CompTable, which uses BaseSalary to calculate bonuses and retirement contribution. (this part works fine). They are all currency fields.

Then, I have this Javascript:

fd.beforeSave(function () {
fd.field('BaseSalary').value = thousands(fd.field('BaseSalary').value);
fd.field('CandidateBaseSalary').value = thousands(fd.field('CandidateBaseSalary').value);
fd.field('CandidateAnnualBonus').value = thousands(fd.field('CandidateAnnualBonus').value);
fd.field('CandidateHolidayBonus').value = thousands(fd.field('CandidateHolidayBonus').value);
fd.field('CandidateTotalComp').value = thousands(fd.field('CandidateTotalComp').value);
fd.field('CandidateESOPAmount').value = thousands(fd.field('CandidateESOPAmount').value);
fd.field('TotalCompwithEsop').value = thousands(fd.field('TotalCompwithEsop').value);

});
function thousands(num){
return num.toLocaleString().replace(/(?<=\d)(?=(\d{3})+(?!\d))/g,',');

}

Can you see any obvious errors? The numbers are coming through, but without the formatting. I've tested the regex in a few other websites & it seems to be correct.

Thank you!

4

Hi @EHaya,

I'm not sure why you'd need a regex in the thousands() function since toLocaleString() on its own adds the proper thousand separators to the number. Please try removing the replace() function and let me know if this helps.

Other than that, I'd advise not to put string values into currency fields, but since this happens right before saving the form it's probably fine.

5

I adjusted the thousands function but it's still not inserting the commas into the document. Should I turn them into text fields and force it to take digits only?

fd.beforeSave(function () {
fd.field('BaseSalary').value = thousands(fd.field('BaseSalary').value);
fd.field('CandidateBaseSalary').value = thousands(fd.field('CandidateBaseSalary').value);
fd.field('CandidateAnnualBonus').value = thousands(fd.field('CandidateAnnualBonus').value);
fd.field('CandidateHolidayBonus').value = thousands(fd.field('CandidateHolidayBonus').value);
fd.field('CandidateTotalComp').value = thousands(fd.field('CandidateTotalComp').value);
fd.field('CandidateESOPAmount').value = thousands(fd.field('CandidateESOPAmount').value);
fd.field('TotalCompwithEsop').value = thousands(fd.field('TotalCompwithEsop').value);

});
function thousands(num){
return num.toLocaleString();

}

6

Hi @EHaya,

I've experimented a bit, and it seems like the best way to do this is to create a corresponding Text field for each Currency field and then synchronize them like this:

fd.rendered(() => {
    fd.field('BaseSalary').$on('change', () => {
        fd.field('TextBaseSalary').value = fd.field('BaseSalary').value.toLocaleString();
    });
}):

Hide the TextBaseSalary field and use its value in the template.
Make sure to replace fd.rendered with fd.spRendered if you're using SharePoint forms.