Restrict 2 decimal Values.

User Experience
,
1

I need to restrict the decimal values up to 2. The user must not type the decimal value more than 2 values. I cannot use edit input or any Data transform it’s very costly. and property type is double and UI control is pxNumber

How to achieve this solution. Please provide your valuable input.

2

Hi @KasunS98: Can you help us to understand why you are not able to use a edit input and help us to understand what do you mean by edit input as costly?

Check if you can mention a max length in your control (if feasible). Other that this, even if you set the decimal places in the control level, it will just for your visualization. Clipboard will have the actual data.

Please also check if you can make use of decimal property with pyDecimalPrecision property qualifier. Else you may need to validate the property on submit / using edit validate.

You can use custom java scripts to achieve this as mentioned here, But it is not OOTB and not recommended.

Thanks.

3

@KasunS98,

I can think you can try this option if that helps. In the fields settings of double type property, you can navigate to Presentation tab under read only formatting, you can set the decimal places value as 2 and under editable settings, you can check the checkbox setting “Display value using read-only formatting” as true. Please refer to attached doc.

But, this will show for display as restricting to 2 places but in clipboard data, you can see whatever user has typed.i.e if more than 2 decimal places if he has given input.

let us know if this approach works for you.

Thanks,

restrict_decimal.docx (36 KB)

4

@KasunS98 :

Were you able to achieve this ? If yes, how ? Please can you share.

Thanks

5

@KasunS98 @UttamD72

you can try the below screenshot code by overriding the UserWorkForm in your application ruleset

UI Decimal restriction.JPG
UI Decimal restriction.JPG1263×458 53.5 KB

6

Hi @KasunS98

I’d be glad to help you restrict decimal values to 2 places in Pega without using edit input or data transforms, while considering the property type as double and the UI control as pxNumber. Here are the approaches you can consider:

  1. JavaScript Validation:
  • Add a JavaScript validation function to the pxNumber control’s onChange event.
  • In the function, check if the entered value has more than 2 decimal places using regular expressions or string manipulation.
  • If the value is invalid, display an error message and prevent the user from submitting the form.

Example JavaScript code:

function validateDecimalPlaces(inputField) {
const value = inputField.value;
const regex = /^\d+(\.\d{1,2})?$/; // Allows up to 2 decimal places

if (!regex.test(value)) {
alert("Please enter a value with up to 2 decimal places.");
inputField.value = value.substring(0, value.indexOf(".") + 3); // Truncate to 2 decimal places
return false;
}

return true;
}
  1. Server-Side Validation:
  • Create a custom Java function or activity that validates the decimal places.
  • Call this function/activity in the pxNumber control’s onBlur event or during form submission.
  • If the value is invalid, display an error message and prevent the user from proceeding.

Example Java code:

public boolean validateDecimalPlaces(double value) {
String strValue = String.valueOf(value);
int decimalIndex = strValue.indexOf(".");
if (decimalIndex != -1 && strValue.length() - decimalIndex > 3) {
return false; // More than 2 decimal places
}
return true;
}
  1. Custom UI Control:
  • If the above options are not feasible, consider creating a custom UI control that extends pxNumber and enforces the decimal place restriction internally.
  • This would involve overriding the control’s behavior to prevent the user from entering more than 2 decimal places.

Kind Regards

Megha

7

@KasunS98

Put a change event on the property so when it is changed in the UI, it refreshes the section and calls a data transform within the refresh.

Simply put the target as the property and the source as @divide({property reference},1,2)