How to allow 2 decimal places in input widget?

How to allow 2 decimal places in input widget?
I used this code on extended properties. 

SyntaxEditor Code Snippet

var ex=/[^0-9\b.]/; 

This allow me to enter number and "."

I want to allow users to input maximum of 2 decimal places.

Kevin Rosuelo wrote:

How to allow 2 decimal places in input widget?
I used this code on extended properties. 

SyntaxEditor Code Snippet

var ex=/[^0-9\b.]/; 

This allow me to enter number and "."

I want to allow users to input maximum of 2 decimal places.

try this one:

^(0|0?[1-9]\d*)\.\d\d$


assif_tiger wrote:

Kevin Rosuelo wrote:

How to allow 2 decimal places in input widget?
I used this code on extended properties. 

SyntaxEditor Code Snippet

var ex=/[^0-9\b.]/; 

This allow me to enter number and "."

I want to allow users to input maximum of 2 decimal places.

try this one:

^(0|0?[1-9]\d*)\.\d\d$


It didn't worked! It allows to input alphanumeric and special characters.


Kevin Rosuelo wrote:

assif_tiger wrote:

Kevin Rosuelo wrote:

How to allow 2 decimal places in input widget?
I used this code on extended properties. 

SyntaxEditor Code Snippet

var ex=/[^0-9\b.]/; 

This allow me to enter number and "."

I want to allow users to input maximum of 2 decimal places.

try this one:

^(0|0?[1-9]\d*)\.\d\d$


It didn't worked! It allows to input alphanumeric and special characters.


/^\d+\.\d{0,2}$/

Tested here : https://regexr.com/

doesn't worked again

I used this code

SyntaxEditor Code Snippet

"var ex=/^\d+\.\d{0,2}$/;"

o_sys_tem_developer wrote:

doesn't worked again

I used this code

SyntaxEditor Code Snippet

"var ex=/^\d+\.\d{0,2}$/;"

You need to validate the regex via JS under onChange Listener.



Hey Kevin,

I am not sure why you would need to add characters to the input widget, I think your problem is with using the wrong data type for the variable connected to that input widget. By using the "decimal" data type, you should be able to use decimal places, or you could input your value as "text" and then use data conversion functions to convert it into decimal. You might also find this topic helpful when it comes to further formating your decimal values: https://www.outsystems.com/forums/discussion/46710/input-mask-on-mobile-for-currency/

If this isn't helpful, please be more detailed about your problem (e.g. data type you are using, maybe a screenshot of the properties pane of the input widget, etc)

Best regards,
Michael

Hi,

If you are creating a web app you can use this component. And you have this one for mobile.

Regards,

Marcelo

I'll second Marcelo Ferreira's suggestion of Custom Masks.

I've been using it for dates, but it should work for numbers too.


Hi o_sys_tem_developer,


You can use 2 Regex for before decimal and after decimal inside a screen action and check after decimal regex is true and if the length of after decimal number is less the 2. 


I have done the following screen action to identify if the user has added only 2 decimal numbers Please look at the screenshot below:


1) I used String_Split for slitting before and after decimal numbers and then added 2 regex action with the  pattern "^[0-9]*$"


2) Added if statement to find out if the user has entered 2 decimal places:


This will allow more then 2 decimal numbers to be inputted by user but it will stop the user from submitting the data to server.

Regards,

Manthan Shah.

Hi All

Yah like Carlos and Marcelo said, just use the inputMask Component. It's the most practical way. 

Best regards,

Solution

Hi o_sys_tem_developer,

Adding to the above mentioned solutions. In case you don't want to use the external components to get the work done, below implementation will do the work.


SyntaxEditor Code Snippet (Added the JScript at Screen Level)

function IsDecimalValue(el){
    var ex = /^\d*\.?\d{0,2}$/;
    if(ex.test(el.value) == false){
        el.value = el.value.substring(0,el.value.length - 1);
    }
    if(ex.test(el.value) == false){
        el.value = '';
    }
}



Hope this helps.


Kind Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi o_sys_tem_developer,

Adding to the above mentioned solutions. In case you don't want to use the external components to get the work done, below implementation will do the work.


SyntaxEditor Code Snippet (Added the JScript at Screen Level)

function IsDecimalValue(el){
    var ex = /^\d*\.?\d{0,2}$/;
    if(ex.test(el.value) == false){
        el.value = el.value.substring(0,el.value.length - 1);
    }
    if(ex.test(el.value) == false){
        el.value = '';
    }
}



Hope this helps.


Kind Regards,

Benjith Sam

Thanks! It worked