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.

👉 Download Free Ebook →

👉 Get Free Course →

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

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

Don’t forget to check out:- How to display selected multiple picklist value move left/right from one box to another dual-listbox of dropdown picklist based on button icon to reordered as up/down of selected picklist option uses of ‘lightning-dual-listbox’ element in LWC Salesforce (Lightning Web Component). Click Here For More Information

Final Output →

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

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

leadContactCmp.cmp [Lightning Component File]

  <aura:component controller="leadContactCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="conList" type="List[]"/>

```
    <div class="slds">
```

        <table class="slds-table slds-table--bordered">

```
            <thead>  
```
```
                <tr>  
```
```
                    <th>Name</th>
```
```
                    <th>Phone</th>  
```
```
                    <th>Email</th>
```

                    <th>Description</th>

```
                </tr>  
```
```
            </thead>  
```
```
            <tbody>
```

                <aura:iteration items="{!v.conList}" var="conItem">

```
                    <tr>  
```

                        <td>{!conItem.Contact__r.Name}</td>

                        <td>{!conItem.Contact__r.Phone}</td>

                        <td>{!conItem.Contact__r.Email}</td>

                        <td>{!conItem.Contact__r.Description}</td>

```
                    </tr>  
```
```
                </aura:iteration>  
```
```
            </tbody>  
```
```
        </table>
```
```
    </div>
```
```
</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]

```
  ({
```

	doInit:function(component,event,helper){

       helper.getContactList(component,event,helper);

```
    },
```
```
 })
```

Create JavaScript Helper →

Step 3:- Create Lightning Component : leadContactCmpHelper.js

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

leadContactCmpHelper.js [JavaScript Helper File]

```
  ({
```

	getContactList : function(component,event,helper) {

		var action = component.get("c.leadContactList");

```
        action.setParams({  
```

            "recordId":component.get("v.recordId")

```
        });      
```

        action.setCallback(this,function(response){

            var state = response.getState();

```
            if(state=='SUCCESS'){  
```

                var result = response.getReturnValue();

                component.set("v.conList",result);

```
            }  
```
```
        });  
```
```
        $A.enqueueAction(action);
```
```
	},
```
```
 
```
```
})
```

Create Apex Class Controller →

Step 4:- Create Apex Class : leadContactCtrl.apxc

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

leadContactCtrl.apxc [Apex Class Controller]

```
   public class leadContactCtrl {
```
```
  @AuraEnabled
```

    public static List<Lead> leadContactList(String recordId){

        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];

        //system.debug('leadList ' + leadList);

```
        RETURN leadList;
```
```
    }  
```
```
}
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

What is related record ID in Salesforce?

Each record in the Salesforce.com 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.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. 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 w3web.net