Concepts or coding lessons of Salesforce that you can implement easily

Easily Navigate from one LWC to another LWC

 Here we are going to see Navigate from one LWC to another LWC.

To Navigate from one LWC to another LWC, we need to add LWC component into AURA component. and in Aura component we have to implements "lightning:isUrlAddressable".

In this example, i have create 2 LWC components (sourceLWC, targetLWC) and 1 AURA component - NavigateAuraToLWC.

1. sourceCmp.html

<template>
    <lightning-card icon-name="custom:custom35" variant="Narrow" title="Source LWC">
      <div class="slds-var-p-horizontal_small">
        <lightning-button
          variant="brand"
          label="Navigate"
          onclick={handleClick}
        ></lightning-button>
      </div>
    </lightning-card>
</template>

sourceCmp.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class SourceCmp extends NavigationMixin(LightningElement) {
    handleClick(){
        let pageRef = {
            type : "standard__component",
            attributes: {
             componentName: "c__NavigateAuraToLWC"// namespace + __ + aura component
            },
            state:{
                c__codeName: 'Status'
            }
        };

        this[NavigationMixin.Navigate](pageRef);
    }
}

sourceCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

2. NavigateAuraToLWC.cmp

<aura:component implements="flexipage:availableForAllPageTypes,
        lightning:isUrlAddressable" access="global">

    <aura:attribute type="String" name="codeName"/>

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

    <div class="slds-card">
        <c:targetCmp codeName="{!v.codeName}"/>
    </div>
</aura:component>  

NavigateAuraToLWCController.js

({
    init : function(component, event, helper) {        
        alert('in init');
        // myPageReference give "pageRef" varible created in sourceCode.js LWC
        var myPageReference = component.get("v.pageReference");
        // Access state parameter
        var propertyValue = myPageReference.state.c__codeName;
        alert('propertyValue=> '+propertyValue);
        component.set('v.codeName', propertyValue);
    }
})


3. targetCmp.html

<template>
    <lightning-card icon-name="custom:custom12"
        variant="Narrow" title="Target LWC">
      <div class="slds-var-p-around_large">
       <h1>I am in LWC target component : {codeName}</h1>
      </div>
    </lightning-card>
</template>


targetCmp.js

import { LightningElement, api } from 'lwc';

export default class TargetCmp extends LightningElement {
    @api codeName;
}


targetCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Output: 

After adding sourceCmp component into home page, 


Once Click on Navigate button, it shows below :


Subscribe blog for More updates !!! 


Read More: WhatsApp on Salesforce Integration in 5 Steps
                    Which Salesforce API Do I Use in Integration?
                    When To Use Salesforce REST API  
                   When To Use Salesforce SOAP API 
                   When To Use Salesforce Bulk API 


Latest Salesforce Interview Questions and Answers: