How to get numeric entry fields to display whole numbers as percents

My client wants certain numeric entry components for inputting percentages between 0-100%. I want the ability to input a whole number like 53 into the field and have it formatted to render as '53%'.

I tried entering #'%' into the format field on the numeric entry component, but no matter what I do, the component always multiplies the values I enter by 100 before displaying them as percents. (eg. 53 -> 5300%)

Put the % in a label to the right of the numeric entry field - same as you would with units (kg, s, m/s, etc.).

2 Likes

Is it not possible to format numeric entry fields in the way that I described without labels or additional components?

Related: How to add ºC format in numeric entry field?

It is not possible on the "Numeric" entry field, because as you might expect, they are not intended to display string characters.

You could do it with a standard Text field, however it is considered poor practice.

  1. It is confusing for the operator, are they intended to enter the units or not. If not, now you have to jump through hoops reacting to if the operator does enter the units, and you have to determine how the application will handle it.
  2. It makes it harder to manage the units, what if you want to support both Imperial and SI units, or other units that are accepted for that value. You would be locked into what ever decision was made at design time. Using a label on the side makes it easier to support dynamic units or to change them at a later date.
  3. It makes it harder to align the numbers in a way that looks professional (in this programmers opinion anyway). As where the units are aligned is dependent on how the text is displayed and other factors such as the actual value of the number.

Use the label on the side, you'll be better off for it in the long run.

4 Likes

Okay, this is what I'm going with. Thank you!