6

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 No formatting

With formatting: The field displays asWith Formatting

2
  • Well, 1 is actually 100% and so forth, so it kinda makes sense. Can you add the markup?
    – Adrian Larson
    Commented Oct 16, 2016 at 22:43
  • Did you set a default value to that input?
    – Leisure
    Commented Oct 17, 2016 at 2:19

1 Answer 1

5

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.

2
  • 3
    Ok, I get that, but what's confusing me is the record UI vs the component UI.
    – Tom G.
    Commented Oct 17, 2016 at 14:16
  • 2
    The user entered '50' and the record display that as '50%'. It's '.5' behind the scenes and that's cool, but shouldn't the ui:inputnumber field automatically multiply it back up to '50' when it displays it?
    – Tom G.
    Commented Oct 17, 2016 at 14:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .