[Input Masks Library] Currency Mask Truncates Zeroes

Forge Component
(10)
Published on 2 Oct by Labs
10 votes
Published on 2 Oct by Labs

I have a CurrencyMask on a web block. When the user hits save, it triggers the event that tells the screen to save the value to a currency field. Works good other than typing in a value with at least three zeroes.

1. User types in "150000"

2. Mask updates it to $1500.00

3. The user hits 'save' and events pass the value 1500 to the field

4. Return to the form (has input parameter for the value of the field) and the Currency mask now shows $15.00

I am thinking of several dirty approaches here. I just wonder how you did it.

Hi JC

Is this still open? You can format the value before assigning it to the mask input.

Something like this? I don't know if this is one of your several dirty approaches :) 

Cheers!

Jeffrey Vergara wrote:

Hi JC

Is this still open? You can format the value before assigning it to the mask input.

Something like this? I don't know if this is one of your several dirty approaches :) 

Cheers!

Not this one lol. I just told it dirty because you workaround a lot just to override the current behavior of which I thought the component addressed. I was thinking formatting the value as it get passed from one block to the screen or the other way around. But we can't complain because they did it for free and we have to be thankful instead. Hehehe. Will try this one out.

Thanks!

Jeffrey Vergara wrote:

Hi JC

Is this still open? You can format the value before assigning it to the mask input.

Something like this? I don't know if this is one of your several dirty approaches :) 

Cheers!

Didn't work. Tried several ways (e.g. converting Int to decimal in different parts of the logic) but I think it is a bug on the component.


Hi JC.

I think the component default values use: 2 decimal digits, “,” as decimal separator, “.” as group separator, “$” as currency symbol in prefix. You can change those values.
a. You can change the DecimalDigits parameters to 0 if you don’t want decimal parts in your mask.
b. You can change the CurrencySymbol parameter to “” (empty string) if you don’t want to show a currency symbol in your mask.
c. You can change the GroupSeparator to “” (empty string) if you don’t want to show a group separator in your mask.

Cheers!

Eruel Castillo wrote:

Hi JC.

I think the component default values use: 2 decimal digits, “,” as decimal separator, “.” as group separator, “$” as currency symbol in prefix. You can change those values.
a. You can change the DecimalDigits parameters to 0 if you don’t want decimal parts in your mask.
b. You can change the CurrencySymbol parameter to “” (empty string) if you don’t want to show a currency symbol in your mask.
c. You can change the GroupSeparator to “” (empty string) if you don’t want to show a group separator in your mask.

Cheers!

Hi Eruel,

I was able to use you approach on my case since we are not keen on the cent values. However, I am not tagging your post as the solution because the issue will still come out for people who input the cent values where if they do 1500.00, it will be truncated to 150.00.

Regards,

JC


Juan Carlos Elorde wrote:

Jeffrey Vergara wrote:

Hi JC

Is this still open? You can format the value before assigning it to the mask input.

Something like this? I don't know if this is one of your several dirty approaches :) 

Cheers!

Didn't work. Tried several ways (e.g. converting Int to decimal in different parts of the logic) but I think it is a bug on the component.


do you need to convert it to Int? I used decimal as input variable and it works on me. I wonder maybe i used the ForceUpdate? 

Hi Juan,

I tried to simulate your test case and also faced the same issue. However, I used the default settings of the component and my masked value was "$1,500.00" instead of your "$1500.00". 

I saw some components in the forge that, maybe, can help you. Mainly by working with an input field specially design for currency. However, I manager to do a simple workaround.


1. Added two inputs fields in the same screen, inside an if that is looking if a record is nullidentifier or not.



2. If it is nullidentifier, it will display an input field with the form variable associated with it. If not, it will show you an input field with a local variable, of type currency.


3.On your preparation, or On After (if working with mobile), if you are working with a specific ID, you will pass the currency value that is saved in the DB to your local variable and multiply it by 100.


This will show you the correct value. Since in reality when you want to reach "$1,500.00" you need to type 150000.


4.When updating records, you need to verify the following:

     -If Currency(Local Variable)  = Currency in the DB*100 --> If so, use the DB value.

     -If the value is different --> You need transfer the local variable value into the DB.


I hope this can be helpful for you. Although I know that this is not fixing the issue.


 Maybe if you explore the component you will find a better solution.


Best Regards,

João Delgado




Hi Juan,

I had this error before and because of that I changed the component itself. I leave you my version in attachment.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Juan,

I had this error before and because of that I changed the component itself. I leave you my version in attachment.

Regards,

Marcelo

Hi Marcelo,

Fixed my issue but added a new one.

1. Type 1

Value $1.00

2. Type another 1

Value $10.01

3. Type another 1

Value $100.11

Cheers,

JC


Solution

Hi Juan,

In my case it was working because my values were always prefilled. I did a small change and now should work for your case.

Regards,

Marcelo

Solution

Marcelo Ferreira wrote:

Hi Juan,

In my case it was working because my values were always prefilled. I did a small change and now should work for your case.

Regards,

Marcelo

Can't thank you enough Marcelo. I really need to do a crash course on JS so that I am not that helpless.

Cheers!