+ Start a Discussion
Sainath VenkatSainath Venkat 

Lightning web component to load child records on Parent detail page

Can anyone helpme out how to create a lightning web component to ftech child details on parent record detail page.

For example, On Account detail page, I want show related contact and cases
ANUTEJANUTEJ (Salesforce Developers) 
Hi Sainath,

>> https://salesforce.stackexchange.com/questions/195247/i-want-to-display-child-object-records-when-click-on-parent-object-record-name-i

>> https://github.com/artyom-bazyk/singleRelatedList

The above two links have examples that could be of similar use case as the one you have mentioned, can you try checking them once?

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
veer soniveer soni
Hi Sainath,
try this following code in your org
public with sharing class fetchContact {
   @AuraEnabled(cacheable=true)
    public static sobjectWrapper fetchSobject(Id RecordId) {
        sobjectWrapper osobjectWrapper = new sobjectWrapper();
        osobjectWrapper.lstContact = [SELECT Id,Name From Contact 
                                      WHERE AccountId =: RecordId];
        osobjectWrapper.lstCase = [SELECT Id,CaseNumber From Case 
                                   WHERE AccountId =: RecordId];

 return osobjectWrapper;
                                }


public class sobjectWrapper {
    @AuraEnabled public List<Contact> lstContact{get;set;}
    @AuraEnabled public List<Case> lstCase{get;set;}
}
}
 
<template>
    <lightning-card icon-name="standard:case" title="Case">
    <lightning-datatable
                key-field="id"
                data={CaseRec}
                columns={CaseColumns}>
        </lightning-datatable>
        </lightning-card>

        <lightning-card icon-name="standard:contact" title="Contact">
            <lightning-datatable
            key-field="id"
            data={ContactRec}
            columns={ContactColumns}>
    </lightning-datatable>
    </lightning-card>
        
</template>
 
import { api, LightningElement, wire } from 'lwc';
import fetchSobject from '@salesforce/apex/fetchContact.fetchSobject';


export default class ShowChildRecordsOnParentDetailPage extends LightningElement {
    @api recordId;
    CaseRec;
    CaseColumns = [];
    ContactRec; 
    ContactColumns;

    @wire(fetchSobject,{
        RecordId : '$recordId'
    })lstObjects({error,data}){
        if(data){
            var CaseCol = [];
            var conCol=[];

         console.log('data===> ' + JSON.stringify(data));
         let lstSobject = JSON.parse(JSON.stringify(data));
         var lstContact =  lstSobject.lstContact;
         var lstCase =  lstSobject.lstCase;

         for(let Rec in lstCase[0]){
            CaseCol.push( { label: Rec, fieldName: Rec });
        }
       this.CaseColumns = CaseCol;
       this.CaseRec = lstCase;

    

         for(let Rec in lstContact[0]){
                conCol.push( { label: Rec, fieldName: Rec });
            }
           this.ContactColumns = conCol;
           this.ContactRec = lstContact;

        }
        else if(error){
            console.log('error===> ' + JSON.stringify(error));
        }

    }
}


Let me Know if it's work and do best mark so that it can help to others.

Output of  My Org
User-added image

Sainath VenkatSainath Venkat
@veersoni
Thanks a lot for helping me out in this, for me its only showing record id, I want to show Contact.Mobile and Case.Mobile__c fields too