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,
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:
No comments:
Post a Comment