You need to sign in to do that
Don't have an account?
Mee 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);
}
})
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);
}
})
<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
<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