Created
February 6, 2020 07:14
-
-
Save saicharanreddyk/0a096523b845ac992d1795efb7ff8e4c to your computer and use it in GitHub Desktop.
Lightning - Helper method
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
If there is any reusable code available then we will keep the code in helper and use it in controller | |
We can't directly call helper methods from component | |
Helper methods runs in different threads. Hence better performance | |
Component | |
******************************************************************************************************* | |
<aura:component > | |
<aura:attribute name="empName" type="String" /> | |
<aura:attribute name="age" type="Integer" /> | |
<aura:attribute name="salary" type="Decimal" /> | |
<aura:attribute name="bonus" type="Decimal" /> | |
<div class="box"> | |
<lightning:card title="HelperMethod"> | |
<aura:set attribute="actions"> | |
<lightning:button label="submit" onclick="{!c.show}" /> | |
<lightning:button label="Cancel" onclick="{!c.callMe}" /> | |
</aura:set> | |
<aura:if isTrue="{!v.age>0}" > | |
Name : {!v.empName} <br/> | |
Age :{!v.age} <br/> | |
Salary:{!v.salary} <br/> | |
Bonus:{!v.bonus} | |
<aura:set attribute="else"> | |
Loading... | |
</aura:set> | |
</aura:if> | |
</lightning:card> | |
</div> | |
</aura:component> | |
******************************************************************************************************* | |
Controller | |
******************************************************************************************************* | |
({ | |
show: function(component, event, helper) { | |
helper.myHelper(component); | |
var age =component.get("v.age"); | |
var salary,bonus; | |
if(age > 30){ | |
salary=50000; | |
bonus=3000; | |
}else{ | |
salary=40000; | |
bonus=5000; | |
} | |
console.log('Salary:'+salary); | |
console.log('Bonus:'+bonus); | |
component.set("v.salary",salary); | |
component.set("v.bonus",bonus); | |
}, | |
callMe:function(component, event, helper){ | |
helper.myHelper(component); | |
var age=component.get("v.age"); | |
var salary,bonus; | |
if(age > 50){ | |
salary=90000; | |
bonus=1111; | |
}else{ | |
salary=55555; | |
bonus=2222; | |
} | |
console.log('Salary:'+salary); | |
console.log('Bonus:'+bonus); | |
component.set("v.salary",salary); | |
component.set("v.bonus",bonus); | |
} | |
}) | |
******************************************************************************************************* | |
Helper | |
******************************************************************************************************* | |
({ | |
myHelper : function(component) { | |
var empName=component.get("v.empName"); | |
var age=component.get("v.age"); | |
if(empName==null){ | |
empName='Satish'; | |
component.set("v.empName",empName); | |
} | |
if(age ==null){ | |
age=40; | |
component.set("v.age",age); | |
} | |
console.log('Age :'+age); | |
console.log('Name:'+empName); | |
} | |
}) | |
******************************************************************************************************* | |
Style | |
******************************************************************************************************* | |
.THIS.box { | |
width:500px; | |
height:300px; | |
margin-left:100px; | |
margin-top:100px; | |
padding:20px; | |
border:1px solid grey; | |
} | |
******************************************************************************************************* | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment