Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save saicharanreddyk/5ece5120cade27c308760e66e86b1c0b to your computer and use it in GitHub Desktop.
Save saicharanreddyk/5ece5120cade27c308760e66e86b1c0b to your computer and use it in GitHub Desktop.
Lightning - How to identify which button was clicked using event
In order to find which button was clicked we can use event methods.
In the below example I used three button.
With below piece of code we can find which button was clicked. On click of a button a controller method will be called
inside that methos we can use event methods to capture the information.
var source = event.getSource(); // From which element/source event was fired ?
var id = evt.getLocalId(); // Id of the element from which event was fired
var name = evt.get("v.name"); // Name of the element from which event fired
By using this we can perform the operations.
In this below example i used only one controller method to perform Addition, Multplication and Reset.
Component:
***************************************************************************************
<aura:component >
<aura:attribute name="aval" type="Integer"/>
<aura:attribute name="bval" type="Integer"/>
<aura:attribute name="cval" type="Integer"/>
<lightning:card iconName="standard:account">
<aura:set attribute="title">
Calculator<br/>
Simple Calculator
</aura:set>
<aura:set attribute="actions">
<lightning:buttonGroup>
<lightning:button label="Add" name="Addition" aura:id="add" onclick="{!c.generic}"/>
<lightning:button label="Mul" name="Multiplication" aura:id="mul" onclick="{!c.generic}" />
<lightning:button label="Reset" name="Reset" aura:id="reset" onclick="{!c.generic}" />
</lightning:buttonGroup>
</aura:set>
<aura:set attribute="footer" >
<lightning:badge label="All Rights Reserved"/>
</aura:set>
<lightning:input label="Enter the Aval" type="number" value="{!v.aval}" required="true"/>
<lightning:input label="Enter the Bval" type="number" value="{!v.bval}" required="true"/>
<lightning:input label="Result" type="number" value="{!v.cval}"/>
</lightning:card>
</aura:component>
***************************************************************************************
Controller:
***************************************************************************************
({
generic : function(component, event, helper) {
var source = event.getSource();
var aval = component.get("v.aval");
var bval = component.get("v.bval");
if(source.getLocalId()== 'add')
{
var result= parseInt(aval)+parseInt(bval);
component.set("v.cval",result);
}
else if(source.getLocalId()== 'mul')
{
var result= parseInt(aval)*parseInt(bval);
component.set("v.cval",result);
}
else
{
component.set("v.aval",null);
component.set("v.bval",null);
component.set("v.cval",null);
}
}
})
***************************************************************************************
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment