I am very new to lightning and have a basic issue with creating a button. My requirement is that when i click on 'check my budget' button it should redirect me to the corresponding budget record of that expense.

Budget-Master object; Expense-detail object

<aura:component controller="budgetlightningcntrl">

<aura:attribute name="expense" type="Expenses__c[]"/>

   <aura:registerEvent name="navEvt" type="force:navigateToSObject"/>
      <aura:handler event="force:navigateToSObject" action="{!c.navigate}"/>

            <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
               <table class="slds-p-around_x-small slds-text-body_small slds-table slds-table--bordered slds-table--fixed-layout " >
                           <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>
                            <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>
                        <aura:iteration items="{!v.expense}" var="e">
                        <tr class="slds-hint-parent" >
                        <td><lightning:button variant="brand" label="check budget" onclick="{!c.navigate}" />                       
                        <td scope="row">
                            <div class="slds-truncate slds-text-align--right" >
                            <a target="_blank" href="{!'/'+e.Id}">{!e.Name}</a>                                 
                        <td scope="row">
                             <div class="slds-truncate slds-text-align--right"><ui:outputNumber value="{!e.Amount__c}"/></div>
                        <td scope="row">
                            <div class="slds-truncate slds-text-align--right"><ui:outputText value="{!e.Status__c}" /></div>                            


    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


var idx= event.currentTarget.id;
var navEvt = $A.get("e.force:navigateToSObject");
"recordId": idx,
"slideDevName": "detail"




  public class budgetlightningcntrl 

public static list<Expenses__c> getexpense(){

    return[SELECT Id, Name, Name__c, Reason__c, Amount__c, Date_of_Expense__c, Status__c, 
           Mode_of_Travel__c, Category__c, Budget__c, Budget__r.Name,
           Expense_owner__c, From_Date__c, To_Date__c, isclosed__c, 
           Budget_detail__c, Reimbursed__c FROM Expenses__c];
  • change var exp = component.get("v.expense").budget__r.id; to var exp = component.get("v.expense").budget__c; and see if it works. – Vamsi Krishna Gosu Jan 19 '18 at 7:10
  • no it didnt work i got this error This page has an error. You might just need to refresh it. Action failed: c:Budgetdisplay$controller$navigate [Maximum call stack size exceeded] Failing descriptor: {c:Budgetdisplay$controller$navigate} – Meena Jan 19 '18 at 7:14
  • are you able to get the "var exp = component.get("v.expense").budget__r.id;" , since you are iterating the expense value try to get it from event.currentTarget. – Raj_SFDC Jan 19 '18 at 12:01
  • This is how i have changed the navigate method now using event.curretn target but i am getting the error: "This page has an error. You might just need to refresh it. Action failed:[Cannot read property 'id' of undefined] – Meena Jan 19 '18 at 12:05
  • navigate: function(component, event, helper) { var idx = event.currentTarget.id; var navEvt = $A.get("e.force:navigateToSObject"); navEvt.setParams({ "recordId": "idx" }); navEvt.fire(); } – Meena Jan 19 '18 at 12:07

I suspect your problem boils down to this line:

var exp  = component.get("v.expense").budget__r.id;

First of all remember Apex is case insensitive, but when you access it in you JS controller as above, you need to think case sensitive. So, without trying it, I'd be willing to guess that exp returns as undefined if you debugged this as there would be no id attribute, but rather an Id attribute. Likewise probably for Budget__r So first try:

var exp  = component.get("v.expense").Budget__r.Id;

Second thing I'd look at is that you do not explicitly query the Id field in your Apex query. Sure, Apex shouldn't care, but if the above doesn't help, you might do some debugging to verify you're getting any Id field at all in the budget__r object. Or alternatively, you could just use the Budget__c field, which should resolve to the same as Budget__r.Id.

  • I tried as u said and i am getting the following error: This page has an error. You might just need to refresh it. Action failed: c:Budgetdisplay$controller$navigate [Maximum call stack size exceeded] Failing descriptor: {c:Budgetdisplay$controller$navigate} – Meena Jan 19 '18 at 10:06

Removing the following line in my lightning component code worked!!

    <aura:handler event="force:navigateToSObject" action="{!c.navigate}"/>   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.