[SalesForce] Percentage in Lightning Components is not working correctly

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:

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.

Best Answer

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.

Related Solutions

[SalesForce] Lightning inspector not working after taking action on components

Need to enable debug mode for lightning. After that lightning inspector details can be viewed. Missed the documentation here

[SalesForce] Nested Dynamically create html components in lightning not working

You have bug at "lightning:select" that you have creating Dynamically provide a required attribute label and name .

EXample:

createDynamicallyDivs : function(component, event, helper) {
        console.log('here');
        var index=component.get("v.index");
        var newComponents = [];
        newComponents.push(["aura:html", {
            "tag": "div",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-grid slds-p-bottom_small",
                "aura:id":"div_row_"+index
            }

        }]);
        newComponents.push(["aura:html", {
            "tag": "div",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-frame slds-size--2-of-12 slds-p-right_x-small"
            }

        }]);
        newComponents.push(["aura:html", {
            "tag": "div",

            "body": "Then by",
            "HTMLAttributes": {
                "class": "slds-float_right",
                "title":"Then by"

            }

        }]);

        newComponents.push(["lightning:select",{
            "label" :"Select an item",
            "name" : "selectItem"
        }]);
        newComponents.push(["aura:html", {
            "tag": "option",
            "value":"1",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-frame slds-size--3-of-12 slds-p-right_large",
            }

        }]);


        $A.createComponents(newComponents,
                            function (components, status, errorMessage) {
                                if (status === "SUCCESS") 
                                {
                                    console.log(components.length);
                                    var parentBody = component.find("newtag");
                                    var pageBody = parentBody.get("v.body");
                                    var div1 = components[0];
                                    var div2 = components[1];
                                    var div3 = components[2];
                                    var lightningselect = components[3];
                                    var option = components[4]; 
                                    lightningselect.set("v.body",option);
                                    div2.set("v.body",div3);
                                    div1.set("v.body",div2);
                                    pageBody.push(div1);
                                    pageBody.push(lightningselect);
                                    parentBody.set("v.body", pageBody);
                                }else 
                                {
                                    console.log('error');
                                }
                            }
                           );
    },

Related Topic