Show commas in numeric value in the service catalog

[Marcel H_]

I have a service catalog item that has a field used to enter a number, which is then mapped to a Price field on the task form. I've seen a few posts on enforcing characters and requiring users to enter a dollar amount in the correct format, which is fine, but what I'm being asked to do is the following:

Validate that no letters or characters not normally associated with US currency are allowed (0-9 $ , .)

Format the number as it is typed to automatically insert commas at the correct intervals (eg. 1,000     10,000     100,000 etc.)

Automatic insertion of the comma is to help prevent user error when they type something like 25000 quickly but meant to type 250000. Trailing zeros can make it difficult to spot errors, apparently

Not sure if there is really a way to do this. Would be nice to have an Integer type field for the service catalog.

[Zeeshan Khan1]

Hi Marcel,

You can use below function in your client script to validate and insert commas in your number :

function formatNumber(x) {
       // Regular expression allowing only numeric values
     var reg = /^\d+$/;
     if(!x.match(reg)) 
         return 'Only numeric values allowed';
     else
         return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");     // Insert commas at correct position
 }

Eg :

formatNumber('test') // will return - Only numeric values allowed

formatNumber('25000') // will return - 25,000

You can implement this using onChange client script

[Marcel H_]

Thanks Mohammed. I think that I'm doing something wrong though. I created a Catalog Client Script for onChage and looks like the below:

function onLoad(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
           return;
   }
   //Format allowing only numbers and insert commas at correct intervals
 
 function formatNumber(x) {   
       // Regular expression allowing only numeric values   
   var reg = /^\d+$/;   
   if(!x.match(reg))   
       return 'Only numeric values allowed';   
   else   
       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");   // Insert commas at correct position   
 } 


}

When I go to my catalog item and fill out the variable field that I specified in the script, no formatting seems to occur (no commas inserted).

[Zeeshan Khan1 · Accepted solution]

Hi Marcel,

You can try below script :

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

   if (isLoading || newValue === '') {
   return;
   }
   var result = formatNumber(newValue);
   if(result == false){
         alert('Only numeric values allowed');
         return;

   }
     // To avoid recusrion
   if(result != newValue){
       // Change u_field_name to the field on which this onChange script is applied
       g_form.setValue('u_field_name', formatNumber(newValue));

   }
}
function formatNumber(x) {
   // Regular expression allowing only numeric values
   var reg = /^[\d,]+$/;
   if(!x.match(reg))
       return false;
   else
       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");   // Insert commas at correct position
   }

Let me know if this works fine

[Marcel H_]

Thanks, that worked like a charm. I just changed it slightly to also allow decimal points and dollar signs in the field (just in case someone was actually adding those) and everything seems to working perfectly. I appreciate the help (still trying to learn regular expressions better).