Why does ui:inputnumber with percent sign in formatting add two zeroes to my data?

Question

I'm writing a Lightning Component using the ui:inputnumber field. When I apply a format to the field and that format contains a % sign, the field displays with 2 extra zeroes. What am I doing wrong? Note: The data in the record being displayed has not changed between these examples.

Here's an example without formatting: The field displays as

With formatting: The field displays as

Answer 1

Percentages are ratios of one thing to another thing. Technically, a percentage by itself is meaningless without context. For example, looking to Opportunities as a standard example, we have an Amount, a Probability, and an Expected Revenue field for reporting. Expected Revenue is a formula that essentially reads Amount times Probability.

Since we use percentages so often in Salesforce to derive one value from another (e.g. to calculate taxes, etc), percentages are automatically divided by 100 when being saved to the database, and multiplied by 100 when leaving the database (e.g. to the user interface). This happens for you automatically with no intervention.

This behavior allows you to do some pretty cool things, like writing this in Apex Code:

oppRecord.Taxed_Amount__c = oppRecord.Amount * oppRecord.Tax_Rate__c;

This also works in formulas, flows, and anywhere else a field is specifically created as a percentage.

Lightning also obeys these rules. The value, expressed as a percentage, will appear 100 times smaller in your code. Again, this lets you write things like:

var amount = component.get("v.amount"), 
    taxRate = component.get("v.taxrate"),
    total = amount * taxRate;

If you want a percentage, you'll get a percentage. A percentage is 100 times larger than the decimal value it represents.

This not only means your code is simpler, but the user doesn't have to remember to type in 0.1 if they want 10%. The conversion happens automatically without the user having to think about it.