You need to sign in to do that
Don't have an account?

Need to pass parameters to lightning-controller on Button click in Lightning Component
Hi,
Lets say we have an object and on the lightning component we are displaying its details. when ever i click on the button i need to pass record id to the controller.
This how my code look like:-
<aura:iteration items="{! v.vegs}" var="veg"> <div class='tile' aura:id="test1" press="{! c.tester}" > <img src='{! veg.Image__c}' onClick="{! c.tester}" aura:id="imgId" value="{! veg.Name }"> </img> Name: {! veg.Name } <br></br> price: {! veg.Price__c } <br></br> <ui:button label="Add to cart" press="{! c.addToCart}" aura:id="btn1" > </ui:button> </div> </aura:iteration>
I want something similer to :-
<aura:iteration items="{!v.newCases}" var="case"> <button type="button" onclick="{!c.showCaseDeleteModal(case.Id)}">Delete</button> </aura:iteration>
How can I pass the id to a component controller when the button gets clicked?
Thank you!
Do like this:
In your component, assign the record Id to the button's Id In your JS controller, capture the ID as as source of event:
Kindly mark as solved if it helps.
Regards
Veenesh
All Answers
2. In js controller/helper we can access 'component' from which we can fetch the attribute value.
------------
Thanks,
Srinivas
- Please mark as solution if your problem is resolved.
Do like this:
In your component, assign the record Id to the button's Id In your JS controller, capture the ID as as source of event:
Kindly mark as solved if it helps.
Regards
Veenesh
Component:
<aura:iteration items="{!v.newCases}" var="case">
<button type="button" onclick="{!c.showCaseDeleteModal}" data-caseID ="{!case.Id}">Delete</button>
</aura:iteration>
Controller:
var caseID = event.currentTarget.dataset.caseID;
alert(caseID);
This should work, and in similar way we can add and pass multiple attributes.
Hit thumbs up, if this works for you.
Budget-Master object; Expense-detail object
Budgetdisplay.cmp
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" controller="budgetlightningcntrl" >
<aura:attribute name="expense" type="Expenses__c[]"/>
<aura:attribute name="spinner" type="Boolean" default="false"/>
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<aura:handler event="force:navigateToSObject" action="{!c.navigate}"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:if isTrue="{!v.spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<table class="slds-p-around_x-small slds-text-body_small slds-table slds-table--bordered slds-table--fixed-layout " >
<thead>
<tr>
<th scope="col" colspan="3" class="slds-truncate slds-text-align--center slds-text-align--center
slds-text-align_right slds-text-heading_medium">My Budget and Expenses</th>
</tr>
<tr>
<th scope="col"><div class="slds-truncate ">My Budget</div></th>
<th scope="col" ><div class=" slds-text-align--center">Expenses ID</div></th>
<th scope="col"><div class="slds-truncate slds-text-align--right">Amount</div></th>
<th scope="col"><div class="slds-truncate slds-text-align--right">Status</div></th>
<th scope="col"><div class="slds-truncate slds-text-align--right">Mode of Travel</div></th>
<th scope="col"><div class="slds-truncate slds-text-align--right">Date of Expense</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.expense}" var="e">
<tr class="slds-hint-parent" >
<td>
<button type="button" onclick="{!c.navigate}" id="{!e.Budget__r.Id}">check Budget</button>
</td>
<td scope="row">
<div class="slds-truncate slds-text-align--right" >
<a target="_blank" href="{!'/'+e.Id}">{!e.Name}</a>
</div>
</td>
<td scope="row">
<div class="slds-truncate slds-text-align--right"><ui:outputNumber value="{!e.Amount__c}"/></div>
</td>
<td scope="row">
<div class="slds-truncate slds-text-align--right"><ui:outputText value="{!e.Status__c}" /></div>
</td>
<td scope="row">
<div class="slds-truncate slds-text-align--right"><ui:outputText value="{!e.Mode_of_Travel__c}"/></div>
</td>
<td scope="row">
<div class="slds-truncate slds-text-align--right"><ui:outputDate value="{!e.Date_of_Expense__c}"/></div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
Budgetdisplaycontroller.js
({
doInit: function(component, event, helper) {
// Create the action
var action = component.get("c.getexpense");
// Add callback behavior for when response is received
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.expense", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
// Send action off to be executed
$A.enqueueAction(action);
},
navigate: function(component, event, helper) {
var idx = event.target.id;
alert(idx);
}
,
showSpinner: function(component,event,helper){
component.set("v.spinner",true);
},
hideSpinner: function(component,event,helper){
component.set("v.spinner",false);
}
})
Component code:
Controller code:
In the component
And in the JS Controller
It feels like there are lots of small "details" that makes developping lighning / Apex components quite painful.
Regards.
Solved it for me. I use a wrapper to hold the contact details and other info.
<aura:iteration var="varContactWrapper" items="{!v.contactWrapperList}">
<lightning:button
variant="neutral"
label="Cancel"
onclick="{!c.handleCancel}"
aura:id="{!varContactWrapper}"
name="{!varContactWrapper}">
</lightning:button>
handleCancel : function (component, event, helper) {
var contactToGo = event.getSource().get("v.name");
console.log('contactToGo '+contactToGo.cont.Name);
...etc...
}//handleCancel
What you suggest works for the simple case of the calling component's recordId but, if you want to send more, then the above aura:id and name is the solution.
Regards,
Dave.
The simplest form in Lightning is: and controller:
and the controller:
The indexVar is passed in using the name attribute. It can then be used to index the object list.