Set the Attribute values during LWC to Aura component navigation


In this example, we will see how to pass the attribute value to aura component when redirecting to Aura component from LWC component.

Component Structure

We have two components:-

  • lwcToAuraNavigation :- This is a Lightning web component
  • accountAuraComponent :- This is an aura Component

lwcToAuraNavigation

The lightning web component has three file in its bundle. They are:-

  • lwcToAuraNavigation .html
  • lwcToAuraNavigation .js
  • lwcToAuraNavigation .js-meta.xml

lwcToAuraNavigation .html

The html file has lightning-button , on click of button it will redirect to aura component.

<template>
<lightning-button
name=""
label="Navigate to Aura"
class="slds-m-around_medium"
onclick={navigateToAuraComponent}
></lightning-button>
</template>

lwcToAuraNavigation .js

We have used api decorator to get the current record id of the page. This value will be send to Aura Component. Also Adding two more string variable acntName & acntLocation .

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

export default class LwcToAuraNavigation extends NavigationMixin(LightningElement) {

@api recordId;
acntName ='Back Benchers';
acntLocation = 'Chennai';

navigateToAuraComponent() {
this[NavigationMixin.Navigate]({
"type": "standard__component",
"attributes": {
"componentName": "c__accountAuraComponent"
},
state: {
c__recID: this.recordId,
c__accountName: this.acntName ,
c__accountLocation: this.acntLocation
}
});
}


}


lwcToAuraNavigation .js-meta.xml

This component only visible in Account record page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>True</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>


accountAuraComponent 

The Aura component has two major file in its bundle. They are:-

accountAuraComponent.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddressable,flexipage:availableForAllPageTypes" access="global">
<aura:attribute type="String" name="recID" default="" />
<aura:attribute type="String" name="acntName" default="" />
<aura:attribute type="String" name="acntLocation" default="" />
<aura:handler name="init" value="{!this}" action="{!c.init}"/>

Account id is : {!v.recID} <br/>
Account Name is : {!v.acntName} <br/>
Account Location is : {!v.acntLocation}

</aura:component>   

accountAuraComponentController.js

In init method , we will get the attribute values using current page reference and and set the values to appropriate aura attribute .

({
init: function(cmp, evt) {
var myPageRef = cmp.get("v.pageReference");
var recordId = myPageRef.state.c__recID;
var accountName = myPageRef.state.c__accountName;
var accountLocation = myPageRef.state.c__accountLocation;

cmp.set("v.recID", recordId);
cmp.set("v.acntName", accountName);
cmp.set("v.acntLocation", accountLocation);
}
})


Demo :


No comments:

Post a Comment