7

It seems like Lightning isn't capable yet, to display percentage values intuitively. I used many different ways to display the value with input and output formatted as percentage and all the components multiplied my default value "1" times 100 twice.

As sfdcfox pointed out here, Salesforce multiplies percentage fields automatically *100, before sending them to the frontend. This is a great feature! But it seems like unfortunately Lightning does the same thing again.

{!value}
<lightning:input           value="{!value}" type="number" formatter="percent" />
<ui:inputNumber            value="{!value}" format="##.00%" />
<ui:outputNumber           value="{!value}" format="##.00%" />
<lightning:formattedNumber value="{!value}" style="percent" />

results in this:

enter image description here

So Salesforce makes a percentage field with default "1" automatically a 100 when we query it, what worked totally fine with Visualforce and standard UIs, but Lightning Components seem not to be ready for this automation. So we need to divide every raw percentage value by code before displaying/modifying it and multiply it again when we save it to the database.

But this won't be possible for the lightning:input(beta) because it displays 10.000%, but when I click in it, it switches to 100, so there isn't even an easy way to handle this with data modification, we would need to modify it dynamically with events or something.

enter image description here

Improve this question
3
  • Just a clarification about your statement - "we need to divide every raw percentage value by code before displaying/modifying it and multiply it again when we save it to the database." -> If we enter 50 , we would divide it by 100 so that user sees 50 on UI, but when saving to database why do we need to multiply with 100 ? Salesforce would save it as .5 in database, correct?
    – SfdcBat
    Commented Nov 9, 2017 at 14:51
  • 1
    @SfdcBat the way it goes back to the database is Lightning UI -*> Lightning Controller -*> Apex -> Database. And on both -*> arrows it will be devided by 100, so if you already devided it by 100 on init, you need to multiply it again. Else you will end up with 1% instead of 100.
    – itsmebasti
    Commented Nov 9, 2017 at 15:22
  • That makes sense
    – SfdcBat
    Commented Nov 9, 2017 at 15:25

3 Answers 3

Reset to default
5

The Spring'18 Release Notes reveal, that this will be fixed for lightning:input in the upcomming release:

lightning:input

formatter—The percent-fixed formatter is new for type="number". It displays your input value as is, for example, entering 10 results in 10%. Additionally, the percentage value is now rounded off to the last decimal point when the step value is provided. For example, when step="0.001" and a value of 0.12345 is provided with the percent formatter, you see 12.345% instead of 12% on blur. Similarly, when step="0.001" and a value of 12.3456 is provided with the percent-fixed formatter, you see 12.346%.

And I just verified that formatter="percent-fixed" fixed the issue for lightning:input.

Improve this answer
1
  • 1
    In Summer'20 this is still a problem. I am using a lightning-datatable with one of the columns having the type percent and being editable. The field is displayed correctly, but once you start editing, non-intuitive things are happening. Very confusing for end-users.
    – Sander de Jong
    Commented Jul 16, 2020 at 7:20
-1

You can use this '％' instead.(Just copy this symbol '％' and past to your value). Lightning won't see it as the normal '%'.

Improve this answer
-4

Yes, when we get data in controller it is already divided by 100. If you want to get real you need to multiply to 100.

Improve this answer
1
  • 2
    Remove this answer as it's not helpful
    – Robs
    Commented Jun 27, 2018 at 18:22

You must log in to answer this question.

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