How to displaying related list record based on record Id uses of lookup relationship from lead to contact in lightning component Salesforce | how to query related list to use lookup relationship for display the contact record into lead object based on record Id in Salesforce


Hey guys, today in this post we are going to learn about How to query related list to use lookup relationship for display the contact record into lead object based on record Id in Salesforce.

The Related Record List component shows, in a list, a single type of record related to a record. For example, if you’re looking at an Lead, you can see a related list of Lead for that Contact. Use the Related Record List component on a generic Related Record List page or on a custom page. Members can create records from the list and from lookups.

When a user expands the list of related records, the Related Record List page is displayed, which uses the Related Record List component under the hood. The component may occasionally be empty. For example, if there aren’t any records related to the current record, or if the current record was created in the last 24 hours, no related items populate the component.

The Related List – Single component shows a list of related records based on one specific object. For example, if you’re looking at a contact detail page, you can specify to see the lead related to that contact, without seeing all other types of related records. Use the Related List – Single component on an object page or on a custom page to add specific, related information in context for the page. Members can create records from the list and from lookups. To know more details about Related List, Click Here.


Files we used to display related list record in Lightning Component→

leadContactCmp.cmp Lightning Component It is used for create a table for display the related list record from child to Parent
leadContactCmpController.js JavaScript Controller File It is hold Javascript doInit and navigate functionality to navigate on sObject record.
leadContactCmpHelper.js JavaScript Controller Helper File It is hold for Javascript Helper Function Communicate to Related Queries Values (Child to Parent) from apex method
leadContactCtrl.apxc Apex Class Controller It is used for get SOQL query from Child to Parent from Apex Method



Final Output β†’

display the contact record into lead --


You can download file directly from github by Click Here.


Other related post that would you like to learn in Salesforce

  • Find the below steps β–Ύ


Create Lightning Component β†’

Step 1:- Create Lightning Component : leadContactCmp.cmp

βœͺ The Big Announcement: -
As per student's demands, I re-opened my eBook of "Salesforce Tutorial" Limited-time huge discount offer Absolutely 50% Off.
I am thinking to give you discount offer occasion of Gandhi Jayanti for a powerful "Salesforce admin course" where you can Understand from Basic Concepts to advanced label in Salesforce.
πŸ‘‰ So Don't MISS it... (Access Right Now)
πŸ‘‰ Get Huge Discount Offer 50%: - Get eBook

From Developer Console >> File >> New >> leadContactCmp.cmp

leadContactCmp.cmp [Lightning Component File]

  1.   <aura:component controller="leadContactCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2. 	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  3.     <aura:attribute name="conList" type="List[]"/>
  4.     <div class="slds">
  5.         <table class="slds-table slds-table--bordered">  
  6.             <thead>  
  7.                 <tr>  
  8.                     <th>Name</th>
  9.                     <th>Phone</th>  
  10.                     <th>Email</th>
  11.                     <th>Description</th>
  12.                 </tr>  
  13.             </thead>  
  14.             <tbody>
  15.                 <aura:iteration items="{!v.conList}" var="conItem">  
  16.                     <tr>  
  17.                         <td>{!conItem.Contact__r.Name}</td>
  18.                         <td>{!conItem.Contact__r.Phone}</td>
  19.                         <td>{!conItem.Contact__r.Email}</td>
  20.                         <td>{!conItem.Contact__r.Description}</td>
  21.                     </tr>  
  22.                 </aura:iteration>  
  23.             </tbody>  
  24.         </table>
  25.     </div>
  26. </aura:component>


Create JavaScript Controller β†’

Step 2:- Create Lightning Component : leadContactCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

leadContactCmpController.js [JavaScript Controller]

  1.   ({
  2. 	doInit:function(component,event,helper){  
  3.        helper.getContactList(component,event,helper);
  4.     },
  5.  })


Create JavaScript Helper β†’

Step 3:- Create Lightning Component : leadContactCmpHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

leadContactCmpHelper.js [JavaScript Helper File]

  1.   ({
  2. 	getContactList : function(component,event,helper) {
  3. 		var action = component.get("c.leadContactList");  
  4.         action.setParams({  
  5.             "recordId":component.get("v.recordId")  
  6.         });      
  7.         action.setCallback(this,function(response){  
  8.             var state = response.getState();  
  9.             if(state=='SUCCESS'){  
  10.                 var result = response.getReturnValue();           
  11.                 component.set("v.conList",result);  
  12.             }  
  13.         });  
  14.         $A.enqueueAction(action);
  15. 	},
  17. })


Create Apex Class Controller β†’

Step 4:- Create Apex Class : leadContactCtrl.apxc

From Developer Console >> File >> New >> Apex Class

leadContactCtrl.apxc [Apex Class Controller]

  1.    public class leadContactCtrl {
  2.   @AuraEnabled
  3.     public static List<Lead> leadContactList(String recordId){
  4.         List<Lead> leadList = [SELECT Id, Contact__c, Contact__r.Name, Contact__r.FirstName, Contact__r.LastName, Contact__r.Email, Contact__r.Phone, Contact__r.Description FROM Lead WHERE id=:recordId];
  5.         //system.debug('leadList ' + leadList);
  6.         RETURN leadList;
  7.     }  
  8. }

display the contact record into lead --


Further post that would you like to learn in Salesforce



FAQ (Frequently Asked Questions)

What is related record ID in Salesforce?

Each record in the system has a unique ID field assigned to it which is known as Record ID. It is system generated and cannot be edited or deleted. It is generated every time a new record is inserted into the application.

What are related records in Salesforce?

The Related Record component is a standard Lightning Page component linked to a quick action. It displays information on a related record and allows users to edit, create and associate other records.

How do you display related records in lightning component?

First, edit the lightning page layout by clicking on the setup gear in the upper right-hand corner and selecting Edit Page. Add a related record component by dragging it from the component list to the page. Choose which record is displayed by clicking Edit Lookup Fields and choosing contact name and then done.

Related Topics | You May Also Like


Hi, This is Vijay Kumar behind the admin and founder of I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on

Leave a Comment