Catalog Variable should display as percentage

[CathyD]

Example: if user enters "10" it should display as "10.00%"

The user should also have the ability to enter 10.5 and it should display as "10.50%.

[Danish Bhairag2]

Hi @CathyD ,

OOTB this behaviour is not possible. But u can create an onChange client script in order to achieve this.

Create a single line text variable n then create an on change client script on that variable. Inside that code will be something like this.

var finalValue = newValue + ".00%";

g_form.setValue("variable_name",finalValue);

Thanks,

Danish

[Amit Verma]

Hi @CathyD 

Any specific reason you want to have the percentage represented as 10.00% ? Are you expecting the field to hold % value in decimal as well like 10.25% ?

If yes, then as per my understanding, you want the whole percentage numbers to be automatically rounded off to 2 digits to zero and float percentages to be rounded to 2 decimal places

Taking above assumption into consideration, my approach to this situation would be to have an On-Change Catalog Client Script on your % variable which will first check if the input % is a whole number or a float. If whole number, simply append ".00%" to it else take the float number, round it to 2 digits post decimal if required and append "%" to it. Refer below On-Change Catalog Client Script to implement this :

function onChange(control, oldValue, newValue, isLoading) {
   if (isLoading || newValue == '') {
      return;
   }

   //Type appropriate comment here, and begin script below
	var percentage = g_form.getValue('inputPercentage');
	// Check if the input percentage is a whole number 
	if((percentage % 1) == '0' ){
			g_form.setValue('inputPercentage',percentage+'.00%'); // Append .00% to it
	}
	// If the input percentage is float, round to 2 decimal places and append % to it
	else if((percentage % 1) != '0'){
			var perc = parseFloat(percentage);
			perc = perc.toFixed(2);
			g_form.setValue('inputPercentage',perc+'%');
		}
}

Thanks & Regards

Amit Verma