+ Start a Discussion
Mee SharmaMee Sharma 

Lightning button is not redirecting to record detail page

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

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.currentTarget.id;
    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({
      "recordId": idx
        });
    navEvt.fire();

}
,
    showSpinner: function(component,event,helper){
        component.set("v.spinner",true);
    },
    
    hideSpinner: function(component,event,helper){
        component.set("v.spinner",false);
    }
    
})
Best Answer chosen by Mee Sharma
sfdcMonkey.comsfdcMonkey.com
Hi remove below statement in your lightning component code :

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

i hope it helps you.
  kindly Let me inform if it helps you and close your query by choosing best answer if you got your right answer so it can helps others
thanks 
sfdcmonkey.com 

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi remove below statement in your lightning component code :

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

i hope it helps you.
  kindly Let me inform if it helps you and close your query by choosing best answer if you got your right answer so it can helps others
thanks 
sfdcmonkey.com 
This was selected as the best answer
Mee SharmaMee Sharma
Thanks a lot!! It worked