How to format currency fields on the form

Hi, one of my field is currency. When I drop control on the form it becomes the type of number. I would like to display it like a currency in this format: $100,000 on the form during the data entry as well as display form. Could anyone help me?

Hello @Mamuka.Khantadze,

To display the currency field in this format in the display form, configure the Currency field parameters as shown in the screenshot.

image

To have field formatted as currency on data entry, you will need to add the below code in JavaScript Editor. Please replace CurrencyField with field's internal name.

fd.spRendered(function() {
   function formatCurrency(fieldName){
       if(fd.field(fieldName).value.length == 0){
           return;
       }
       var string = fd.field(fieldName).value.replace(/[\D\s\._\-]+/g, "");
       if(isNaN(parseInt( string, 10 ))){
           fd.field(fieldName).value = '';
           return;
       }
       var num = parseInt( string, 10 ).toLocaleString("en-US");
       num == 0 ? fd.field(fieldName).value = '' : fd.field(fieldName).value = '$' + num;
   }
   formatCurrency('CurrencyField');

 

   fd.field('CurrencyField').$on('change', function(value) {
       formatCurrency('CurrencyField');
       console.log('New value: ' + value);
   });


});

 fd.spBeforeSave(function(spForm) {
   fd.field('CurrencyField').value = fd.field('CurrencyField').value.replace(/[\D\s\._\-]+/g, "");
});
2 Likes

@mnikitina,

Thank you for quick reply. It has worked like a charm. Much appreciated.

1 Like

hi how do i multiple two currency field and display in control it gives me NAN error it works if i change field to number. Thank you.

Hello @ShantiBhattarai,

Are you formatting the field with the above code?

Could you please share the complete code you are using for calculation?

Thank you!

below is the code i have Quantity1 and Quantity2 should be currency field but it only works if it is set to number.
also the other issue is inside the list and library control it works sometime and sometime it does nothing even with number field it doesnt recognize the change

fd.spRendered(function() {
//alert("rendered");
fd.control('SPDataTable1').$on('change', function() {
//alert("datatable changed");
fd.control('SPDataTable1').widget.bind("dataBound",function(){
var data = fd.control('SPDataTable1').widget._data;
//alert(data);
var TotalCost = 0;
if(data){
for (var i = 0; i < data.length; i++){
TotalCost += parseFloat(data[i].Quantity1)*parseFloat(data[i]. Quantity2);// Quantity1 and Quantity2 need to be currency field only works if it is number
}
}
var amt = parseFloat(TotalCost).toFixed(2);
//alert(amt);
fd.field('Totalcost').value = amt;
})
});
})

@ShantiBhattarai,

To get the integer from the currency column of the 'List or Library' control you need to leave only number signs with the code like this:
parseInt(data[i].Quantity1.replace(/[^0-9.]/g, ""));

Also please see how to calculate the total for a column of the 'List or Library' control in this post:

1 Like

i have a issue in list and library control where first when i add item it woks and then i go and delete one of the item and try to add new item again it adds the row with undefined and disables the delete button if i click edit and change the value it work is it expected behaviour? i just want the row to be added as someone will add for the first time

image

@ShantiBhattarai,

Do you have any JavaScript in the form besides calculating the totals? Do you have any custom CSS?

Could you please share them so I could reproduce the issue on my side.

Hi Nikitina,

i dont have any other css or javascript beside calculating totals. i tried in new list with just the code for this.

@ShantiBhattarai,

Please share the complete code you are using in the form.

Is editing of List or Library control set to inline or dialog?
If it is a dialog, do you have any script in the child form?

Also, please check the app version in the console (F12). The latest version is 1.0.7. If the latest version not installed, please follow the instructions on how to Update the app package.

image

Hi Nikitina,

The version is latest and code is below. i don't have any other css or JS beside this. It just happens random if you delete the row and add again it will say undefined in the title field and also calculation of total works sometime and most of the time it recognizes the change only on delete event not when added when new item added it doesn't update total but if i delete one row it will update.

fd.spRendered(function() {

fd.control('SPDataTable1').$on('change', function() { 	
    fd.control('SPDataTable1').widget.bind("dataBound",function(){
        var data = fd.control('SPDataTable1').widget._data;			
        var TotalCost = 0;
        if(data){
            for (var i = 0; i < data.length; i++){
                                  TotalCost += parseInt(data[i].Cost.replace(/[^0-9.]/g, ""))*parseInt(data[i]. Cost1.replace(/[^0-9.]/g, ""));
			}
        }
        var amt =parseInt(TotalCost).toFixed(2);            
        fd.field('TotalCost').value = amt;
    })
});

})

@ShantiBhattarai,

Please try the code from the example from the post below and let me know if the problem persists. This code is more suitable for calculating totals if editing of List or Library control is inline, as it does calculation periodically, not on change.

it doesnt do anything no error but doesnt calculate total also one thing i noticed is if i create a new form and just close and try to create new one it is loading previous form which was not saved or which gave error while saving its caching somewhere item is not in list but if i open new form i can see old data which was not saved that might be an issue? gives error Cannot read property 'widget' of undefined while saving

@ShantiBhattarai,

This error might be caused by the incorrect name of the control in this line:

var value = fd.control('SPDataTable0').widget.dataItems();

Please check the internal name of List or Library control in the code.

Do you mean that the child items created for the previous unsaved entry are displayed in the new entry?

If the parent item with child elements has not been saved, child elements will be displayed to the user who created them in the new form. That is the expected behavior of the control.

yes for the second part it is true if it is expected behaviour and just shows to the one who created then it will be fine. But for the issue to calculate total the problem is still there it doesn't update the total cost field and i have defined right widget

var value = fd.control('SPDataTable1').widget.dataItems();

image

@ShantiBhattarai,

Is it possible to provide us temporary access to your tenant to troubleshoot the issue?

Please send us an email to support@plumsail.com

I wont be able do that i will try to create in new list again and see how it behaves

1 Like

Good news, everyone!
With the recent update to v1.6.1, we've added customization options for both Number and Currency field and now their format can be set in the editor - https://plumsail.com/docs/forms-sp/designer/fields-sp.html#designer-currency

The value retrieved with JS will stay the same number type, only presentation changes:
image

The Format option doesn't seem to apply itself if the Field is set to Read-only (which would be a normal thing to do if it is being calculated).

Notice that the Total Payment includes neither the currency symbol nor both digits of the last one is zero.