You need to sign in to do that
Don't have an account?
SFDC New learner
How to display all cases related details using lightning component
Hi All,
Trying to display a list of records in the related list for the custom object using lightning component.
I am getting the custom object Id and displaying all the cases related to that object.
But I m not able to display all record in a proper format and also on click of casenumber link should navigate to sobject details page.
App:
<aura:application extends = "force:slds" >
<aura:attribute name="sessId" type="String" access="public" />
<c:CaseRelatedListComponent sessId="{!v.sessId}" />
</aura:application>
Component:
<aura:component controller = "CaseRelatedListApex" >
<aura:attribute name="sessId" type="string"/>
<aura:attribute name="cases" type="Case[]"/>
<aura:handler name="init" value="{!this}" action="{!c.check}" />
<!-- <aura:attribute name="Cases" type="list"/>-->
<aura:attribute name="recordId" type="String" />
<aura:handler event="c:CaseRelatedListEvent" action="{!c.handleCSDetailsEvent}" />
<div class="slds-col slds-col--padded slds-p-top--large">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="Login form" class="slds-text-heading--small
slds-p-vertical--medium">
</legend>
<form class="slds-form--stacked">
<aura:iteration items="{!v.cases}" var="ocas">
<li>
<!--javascript:void(0)-->
<a href="javascript:void(0)" onclick="{!c.handleClick}">
<ui:outputText value="{!ocas.CaseNumber}" /><br/>
</a>
<label class="slds-form-element__label" for="Name">Case Status</label>
<div class="slds-float_right">
<ui:outputText value="{!ocas.Status}"/> <br/><br/>
</div>
<label class="slds-form-element__label" for="Name">Subject</label>
<div class="slds-float_right">
<ui:outputText value="{!ocas.Subject}"/><br/>
</div>
</li>
</aura:iteration>
</form>
</fieldset>
</div>
</div>
</aura:component>
Javascript:
({
check : function(component, event, helper){
console.log('inside controller');
helper.getCases(component,event,helper);
}
,
handleClick : function(component,event,helper){
helper.navigateTorecordDetails(component,event);
}
})
Helper:
({
getCases : function(Component,event,helper) {
var action= Component.get("c.getObject");
var sessId = Component.get("v.sessId");
action.setParams({
"sessId" :sessId
});
action.setCallback(this,function(response){
var state=response.getState();
if (Component.isValid() && state === "SUCCESS") {
alert('Cases');
Component.set("v.cases",response.getReturnValue());
}
});
$A.enqueueAction(action);
},
navigateTorecordDetails :function(Component,event,helper){
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": Component.get("v.recordId")
});
navEvt.fire();
},
})
Apex:
@AuraEnabled
public static List<Case> getObject(string sessId){
LIST< session__c > objsessList = new LIST< session__c >();
LIST< Case > objCaseList = new LIST< Case >();
if(sessId!=null)
{
objCaseList =[select id,subject,session_ID__c,CaseNumber,Status from case where session_ID__c =:sessId limit 4];
//return objCaseList;
}
return objCaseList;
}
}
When I click on CaseNumber it shows error as
Action failed: c:CaseRelatedListComponent$controller$handleClick [Cannot read property 'setParams' of undefined] Failing descriptor: {c:CaseRelatedListComponent$controller$handleClick}
Do I need to create the event for this? How to pass the recordId to display the case details?
Pls, help me to fix this code.
Thanks,
Sirisha
Trying to display a list of records in the related list for the custom object using lightning component.
I am getting the custom object Id and displaying all the cases related to that object.
But I m not able to display all record in a proper format and also on click of casenumber link should navigate to sobject details page.
App:
<aura:application extends = "force:slds" >
<aura:attribute name="sessId" type="String" access="public" />
<c:CaseRelatedListComponent sessId="{!v.sessId}" />
</aura:application>
Component:
<aura:component controller = "CaseRelatedListApex" >
<aura:attribute name="sessId" type="string"/>
<aura:attribute name="cases" type="Case[]"/>
<aura:handler name="init" value="{!this}" action="{!c.check}" />
<!-- <aura:attribute name="Cases" type="list"/>-->
<aura:attribute name="recordId" type="String" />
<aura:handler event="c:CaseRelatedListEvent" action="{!c.handleCSDetailsEvent}" />
<div class="slds-col slds-col--padded slds-p-top--large">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="Login form" class="slds-text-heading--small
slds-p-vertical--medium">
</legend>
<form class="slds-form--stacked">
<aura:iteration items="{!v.cases}" var="ocas">
<li>
<!--javascript:void(0)-->
<a href="javascript:void(0)" onclick="{!c.handleClick}">
<ui:outputText value="{!ocas.CaseNumber}" /><br/>
</a>
<label class="slds-form-element__label" for="Name">Case Status</label>
<div class="slds-float_right">
<ui:outputText value="{!ocas.Status}"/> <br/><br/>
</div>
<label class="slds-form-element__label" for="Name">Subject</label>
<div class="slds-float_right">
<ui:outputText value="{!ocas.Subject}"/><br/>
</div>
</li>
</aura:iteration>
</form>
</fieldset>
</div>
</div>
</aura:component>
Javascript:
({
check : function(component, event, helper){
console.log('inside controller');
helper.getCases(component,event,helper);
}
,
handleClick : function(component,event,helper){
helper.navigateTorecordDetails(component,event);
}
})
Helper:
({
getCases : function(Component,event,helper) {
var action= Component.get("c.getObject");
var sessId = Component.get("v.sessId");
action.setParams({
"sessId" :sessId
});
action.setCallback(this,function(response){
var state=response.getState();
if (Component.isValid() && state === "SUCCESS") {
alert('Cases');
Component.set("v.cases",response.getReturnValue());
}
});
$A.enqueueAction(action);
},
navigateTorecordDetails :function(Component,event,helper){
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": Component.get("v.recordId")
});
navEvt.fire();
},
})
Apex:
@AuraEnabled
public static List<Case> getObject(string sessId){
LIST< session__c > objsessList = new LIST< session__c >();
LIST< Case > objCaseList = new LIST< Case >();
if(sessId!=null)
{
objCaseList =[select id,subject,session_ID__c,CaseNumber,Status from case where session_ID__c =:sessId limit 4];
//return objCaseList;
}
return objCaseList;
}
}
When I click on CaseNumber it shows error as
Action failed: c:CaseRelatedListComponent$controller$handleClick [Cannot read property 'setParams' of undefined] Failing descriptor: {c:CaseRelatedListComponent$controller$handleClick}
Do I need to create the event for this? How to pass the recordId to display the case details?
Pls, help me to fix this code.
Thanks,
Sirisha
You can use the below way to Navigate:
Component:
<a href="#" data-recId="{!ocas.Id}" onclick="{!c.handleClick}">{!ocas.CaseNumber}</a>
Controller Method:
handleClick : function(component, event, helper) {
console.log('@@@ MovetoDetailPage method calls');
var idstr = event.target.getAttribute("data-recId")
console.log('@@@ CaseId ==> ' + idstr);
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": idstr
});
navEvt.fire();
}
Can you please Let me know if it helps or not!!!
If it helps don't forget to mark this as a best answer!!!
Thanks,
Maharajan.C