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

[vijayk3327]

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.

👉 To get source code live demo link, Click Here.

Create Lightning Component
Step 1:- Create Lightning Component : childParentCmp.cmp

`<aura:component controller="childParentCmpCtrl" 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="carAryList" type="carModel__c[]"/>

<div class="slds slds-p-around--medium">
      <div>
         <table class="slds-table slds-table_bordered slds-table_cell-buffer" style="border:1px #ddd solid;">                
            <thead>
                <tr class="slds-text-title_caps">
                    <th>Car Maker</th>
                    <th>Car Model</th>
                    <th>Regiser User</th>
                    <th>Country</th>
                    <th>Phone</th>
                    <th>State</th>
                </tr>
            </thead>     
            <tbody>
              <aura:iteration items="{!v.carAryList}" var="item">   
               <tr>
                    <td id="modelName"><a data-recId="{!item.Id}" href="" onclick="{!c.navigate}" >{!item.lookup_relation__r.Name}</a></td>
                    <td>{!item.Name}</td>
                    <td>{!item.car_model_master_rel__r.User_Name__r.Name}</td>
                    <td>{!item.car_model_master_rel__r.Country__c}</td>
                    <td>{!item.car_model_master_rel__r.Phone__c}</td>
                    <td>{!item.car_model_master_rel__r.state__c}</td>
                </tr>
               </aura:iteration>   
            </tbody>
        </table>
    </div>

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

        <br/><br/>
        <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>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <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>
            </div>
</div>

</div>

</aura:component>`

Create Component JavaScript Controller
Step 2:- Create Lightning Component : childParentCmpController.js

`({
doInit : function(component, event, helper) {
helper.childParentHelper(component);
},

 navigate:function(component, event, helper){        
    var record = event.currentTarget.getAttribute("data-recId");   
   // alert(record);
    var carMdlName = component.get('v.carAryList')
    //var record = event.getSource().get("v.id");
    console.log('====='+record);
    var sObectEvent = $A.get("e.force:navigateToSObject");          
    sObectEvent.setParams({
        "recordId":  record           
        //"slideDevName": "detail"
    });
    sObectEvent.fire(); 
},

})`

Create Component JavaScript Helper
Step 3:- Create Lightning Component : childParentCmpHelper.js

`({
childParentHelper : function(component, event, helper) {
var action = component.get('c.carModelFetch');
action.setParams({
"carModelId" : component.get("v.recordId")
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var results = response.getReturnValue();
var lookupList = JSON.stringify('stringItems' + results);
component.set("v.carAryList",results);
}
});

    $A.enqueueAction(action);
},

})`

Create Apex Class Controller
Step 4:- Create Apex Class : childParentCmpCtrl.apxc

`public class childParentCmpCtrl {

//Child TO parent 
@AuraEnabled 
public static List<carModel__c> carModelFetch( Id carModelId){
    system.debug('carModelId::  '+carModelId);
    List<carModel__c> carList = [SELECT id, Name,lookup_relation__c, lookup_relation__r.Name, car_model_master_rel__r.Country__c,
                                 car_model_master_rel__r.Phone__c, car_model_master_rel__r.state__c, 
                                 car_model_master_rel__r.User_Name__r.name FROM carModel__c WHERE id=:carModelId];
    system.debug('carList::#  '+carList);
    RETURN carList;
}

}`

👉 To get source code live demo link, Click Here.