Retrieve data of Cross-object(Lookup/Master-Detail) from child to parent for custom objects and navigate to record detail page in lightning component Salesforce | How to fetch data of Cross object using SOQL query in salesforce

1,721 views

Hey guys, today in this post we are going to learn about How retrieve data of Cross-object(Lookup/Master-Detail) from child to parent for custom objects and navigate to record detail page in lightning component Salesforce.

Files we used in this post example

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

Live Demo

child to parent query for custom objects in salesforce -- w3web.net

 

You can download file directly from github by Click Here.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

 

 

 

Other related post that would you like to learn in Salesforce

 

Create Lightning Component

Step 1:- Create Lightning Component : childParentCmp.cmp

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

childParentCmp.cmp [Lightning Component File]

  1.    <aura:component controller="childParentCmpCtrl" 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="carAryList" type="carModel__c[]"/>
  4.  
  5.     <div class="slds slds-p-around--medium">
  6.           <div>
  7.              <table class="slds-table slds-table_bordered slds-table_cell-buffer" style="border:1px #ddd solid;">                
  8.                 <thead>
  9.                     <tr class="slds-text-title_caps">
  10.                         <th>Car Maker</th>
  11.                         <th>Car Model</th>
  12.                         <th>Regiser User</th>
  13.                         <th>Country</th>
  14.                         <th>Phone</th>
  15.                         <th>State</th>
  16.                     </tr>
  17.                 </thead>     
  18.                 <tbody>
  19.                   <aura:iteration items="{!v.carAryList}" var="item">   
  20.                    <tr>
  21.                         <td id="modelName"><a data-recId="{!item.Id}" href="" onclick="{!c.navigate}" >{!item.lookup_relation__r.Name}</a></td>
  22.                         <td>{!item.Name}</td>
  23.                         <td>{!item.car_model_master_rel__r.User_Name__r.Name}</td>
  24.                         <td>{!item.car_model_master_rel__r.Country__c}</td>
  25.                         <td>{!item.car_model_master_rel__r.Phone__c}</td>
  26.                         <td>{!item.car_model_master_rel__r.state__c}</td>
  27.                     </tr>
  28.                    </aura:iteration>   
  29.                 </tbody>
  30.             </table>
  31.         </div>
  32.  
  33.  <br/><br/>
  34.    <!--Start RelatedTopics Section-->
  35. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  36.  
  37.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  38.  
  39.             <br/><br/>
  40.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
  41.             <div style="display:block; overflow:hidden;"> 
  42.                 <div style="width: 50%; float:left; display:inline-block">
  43.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  44.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  45.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  46.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  47.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  48.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  49.                     </ul>
  50.             </div>
  51.  
  52.             <div style="width: 50%; float:left; display:inline-block">
  53.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  54.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  55.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  56.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  57.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  58.                         <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
  59.                     </ul>
  60.                 </div>
  61.                <div style="clear:both;"></div> 
  62.                <br/>
  63.                 <div class="youtubeIcon">
  64.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  65.                 </div>
  66.     </div>
  67.  
  68. </div>
  69.  
  70.   <!--End RelatedTopics Section-->
  71.  
  72.     </div>
  73. </aura:component>

Create Component JavaScript Controller

Step 2:- Create Lightning Component : childParentCmpController.js

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

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

childParentCmpController.js [JavaScript Controller]

  1.    ({
  2. 	doInit : function(component, event, helper) {
  3. 		helper.childParentHelper(component); 
  4. 	},
  5.  
  6.      navigate:function(component, event, helper){        
  7.         var record = event.currentTarget.getAttribute("data-recId");   
  8.        // alert(record);
  9.         var carMdlName = component.get('v.carAryList')
  10.         //var record = event.getSource().get("v.id");
  11.         console.log('====='+record);
  12.         var sObectEvent = $A.get("e.force:navigateToSObject");          
  13.         sObectEvent.setParams({
  14.             "recordId":  record           
  15.             //"slideDevName": "detail"
  16.         });
  17.         sObectEvent.fire(); 
  18.     },
  19.  
  20. })

Create Component JavaScript Helper

Step 3:- Create Lightning Component : childParentCmpHelper.js

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

childParentCmpHelper.js [JavaScript Helper File]

  1.   ({
  2. 	childParentHelper : function(component, event, helper) {
  3.         var action = component.get('c.carModelFetch');
  4.         action.setParams({
  5.             "carModelId" : component.get("v.recordId")                
  6.         });
  7.         action.setCallback(this, function(response) {
  8.             var state = response.getState();
  9.             if (state === "SUCCESS") {                
  10.                 var results = response.getReturnValue();
  11.                 var lookupList = JSON.stringify('stringItems' + results);               
  12.                 component.set("v.carAryList",results);               
  13.             }
  14.         }); 
  15.  
  16.         $A.enqueueAction(action);
  17.     },
  18. })

Create Apex Class Controller

Step 4:- Create Apex Class : childParentCmpCtrl.apxc

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

childParentCmpCtrl.apxc [Apex Class Controller]

  1.    public class childParentCmpCtrl {
  2.  
  3.     //Child TO parent 
  4.     @AuraEnabled 
  5.     public static List<carModel__c> carModelFetch( Id carModelId){
  6.         system.debug('carModelId::  '+carModelId);
  7.         List<carModel__c> carList = [SELECT id, Name,lookup_relation__c, lookup_relation__r.Name, car_model_master_rel__r.Country__c,
  8.                                      car_model_master_rel__r.Phone__c, car_model_master_rel__r.state__c, 
  9.                                      car_model_master_rel__r.User_Name__r.name FROM carModel__c WHERE id=:carModelId];
  10.         system.debug('carList::#  '+carList);
  11.         RETURN carList;
  12.     }
  13.  
  14. }

Child to Parent query for custom objects in Salesforce -- w3web.net

Further post that would you like to learn in Salesforce

 

FAQ (Frequently Asked Questions)

What is lookup and master detail relationship in Salesforce?

Lookup and Master-detail both are types of relationships. In lookup, both objects are not sharing properties between them means loosely coupled. In Master-detail, both objects are sharing properties with each other means tightly coupled.

Can we convert master detail to lookup in Salesforce?

Yes, We can Convert Master Detail Relationship into Lookup.

What is difference between master-detail and lookup?

The Salesforce lookup relationship has no relation with other records. It does not depend on any other objects, whereas a master-detail relationship has an association with other records. On the other hand, the lookup relationship is just a reference. It can be even blank or NULL.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder

👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration



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

Leave a Comment