function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SFDC New learnerSFDC 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
Best Answer chosen by SFDC New learner
Maharajan CMaharajan C
HI 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