Standard and Custom Percentage Calculator in Salesforce Lightning Component
Requirement
We are going to calculate some standard percentage and custom percentage i.e. any percent you want to calculate any input number.
On click of button created on any standard object (In our case i.e. account object)
I’m going to show you how to do that step-by-step to create a well tabular format by using slds datatable in lightning component.
Create a New Action
- Log in to your Salesforce org in Lightning Experience.
- Open Developer Console and create a new Lightning Component.
- While naming Lightning Component, select Lightning Quick Action from Component Configuration below description and Name.
- Click on Object Manager and select Account object.
- Click on Account and go to Buttons, Links, and Actions.
- Click New Action.
- Select Lightning Component in Action Type and then select that Lightning Component which you named earlier in the developer console.
- Give the label and name.
- Click Save.
- In the Account object, select page layouts.
- In Account Layout, from Mobile and Lightning Actions drag action you made in the eighth step and drop under Salesforce Mobile and Lightning Experience Actions.
- Click QuickSave.
- You will find your actions on the Accounts page in the drop-down menu as shown below.
Don't forget to check out: Invoke Apex Class From JavaScript Button in Salesforce
Working on Lightning Component
-
PercentCalculator.cmp
<aura:component implements="force:lightningQuickAction,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <aura:attribute name="input1" type="integer" /> <aura:attribute name="input2" type="integer" /> <aura:attribute name="input3" type="integer"/> <aura:attribute name="input4" type="integer" /> <aura:attribute name="output25" type="integer" /> <aura:attribute name="output35" type="integer" /> <aura:attribute name="output45" type="integer" /> <aura:attribute name="customInput" type="integer" /> <aura:attribute name="outputAny" type="integer" /> <lightning:input class="slds-hidden" type="number" value="{!v.input1}" required="true"/> <lightning:input class="slds-hidden" type="number" value="{!v.customInput}" required="true"/> <lightning:input class="slds-hidden" type="number" name="input2" aura:id="Second" readonly="true" value="25" label="Read-only number field" /> <lightning:input class="slds-hidden" type="number" name="input3" aura:id="Third" readonly="true" value="35" label="Read-only number field" /> <lightning:input class="slds-hidden" type="number" name="input4" aura:id="Fourth" readonly="true" value="45" label="Read-only number field" /> <lightning:card iconName="utility:user" title="Percentage Calculator"> <table style="max-width: 100rem !important; width:100% !important " class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid"> <thead> <tr class="slds-text-title--small"> <th scope="col"> <div class="slds-truncate" title="Input No">Input No<br></br><br></br><br></br><lightning:input type="number" value="{!v.input1}" required="true"/></div> </th> <th scope="col"> <div class="slds-truncate" title="25 % of Input No"><lightning:button value="" label="25 %" onclick="{!c.doCal25}"/><br></br><br></br><br></br><br></br><br></br></div> </th> <th scope="col"> <div class="slds-truncate" title="35 % of Input No"><lightning:button value="" label="35 %" onclick="{!c.doCal35}"/><br></br><br></br><br></br><br></br><br></br></div> </th> <th scope="col"> <div class="slds-truncate" title="45 % of Input No"><lightning:button value="" label="45 %" onclick="{!c.doCal45}"/><br></br><br></br><br></br><br></br><br></br></div> </th> <th scope="col"> <div class="slds-truncate" title="Any % of Input No"><lightning:button value="" label="Any %" onclick="{!c.docalAny}"/><br></br><br></br><lightning:input type="number" value="{!v.customInput}" required="true"/></div> </th> </tr> </thead> <tbody> <tr> <td data-label="Input No"> Output is : </td> <td data-label="25 % of Input No"> {!v.output25} </td> <td data-label="35 % of Input No"> {!v.output35} </td> <td data-label="45 % of Input No"> {!v.output45} </td> <td data-label="Any % of Input No"> <div class="slds-form slds-form_horizontal"> {!v.outputAny} </div> </td> </tr> </tbody> </table> </lightning:card> </aura:component>
Check out another amazing blog by Deepak here: Implementation of Google Analytics for Salesforce Communities
-
PercentCalculatorController.js:
({ doCal25 : function(component, event, helper) { var number1 = component.get('v.input1'); console.log(number1) // var number2 = component.get('v.input2'); var number2 = component.find("Second").get("v.value"); console.log(number2) if(number1 != null && number1 != ''){ component.set('v.output25' ,(((parseInt(number1) * parseInt(number2))) / 100)); } else{ alert('Please give input number') } }, doCal35 : function(component, event, helper) { var number1 = component.get('v.input1'); console.log(number1) var number2 = component.find("Third").get("v.value"); console.log(number2) if(number1 != null && number1 != ''){ component.set('v.output35' ,(((parseInt(number1) * parseInt(number2))) / 100)); } else{ alert('Please give input number') } }, doCal45 : function(component, event, helper) { var number1 = component.get('v.input1'); console.log(number1) var number2 = component.find("Fourth").get("v.value"); console.log(number2) if(number1 != null && number1 != ''){ component.set('v.output45' ,(((parseInt(number1) * parseInt(number2))) / 100)); } else{ alert('Please give input number') } }, docalAny : function(component, event, helper) { var number1 = component.get('v.input1'); console.log(number1) var number2 = component.get('v.customInput'); // var number2 = component.find("Fourth").get("v.value"); console.log(number2) if((number1 != null && number1 != '') && (number2 != null && number2 != '')) { component.set('v.outputAny' ,(((parseInt(number1) * parseInt(number2))) / 100)); } else{ alert('Please give input number') } }, })
Thanks for reading my blog. Feel free to ask questions!
Responses