Navigate to Salesforce Lighting Aura Component from Web Component

Navigate to Salesforce Lighting Aura Component from Web Component

lightning:isUrlAddressable should be used in the Salesforce Lightning Aura Component for navigation from the Lightning Web Component.

Sample Code:

Lightning Aura Component:

Lightning Aura Component Code:

<aura:component 
                implements="lightning:isUrlAddressable" 
                access="global">
    <lightning:workspaceAPI aura:id="workspace"/>
    <aura:handler 
                  name="init" 
                  value="{!this}" 
                  action="{!c.onInit}"/>
    <lightning:card>
        Sample Aura Component
    </lightning:card>
</aura:component>

Lightning Aura Component Controller Code:

({
    onInit : function( 
        component, 
        event, 
        helper 
    ) {
        
        let workspaceAPI = component.find( "workspace" );
        workspaceAPI.getFocusedTabInfo().then( function( response ) {
            let focusedTabId = response.tabId;
            workspaceAPI.setTabLabel( {
                tabId: focusedTabId,
                label: "Sample Aura Component"
            } );
        } )
        .catch( function( error ) {
            console.log( 
                'Some error occurred',
                JSON.stringify(
                    error 
                )
            );
        } );
        
    }
})

Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            <lightning-button
                label="Click"
                onclick={handleClick}
                variant="brand">
            </lightning-button>
        </div>
    </lightning-card>
</template>

JavaScript:

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

export default class SampleLightningWebComponent extends NavigationMixin( 
    LightningElement 
) {
    
    handleClick() {

        this[ NavigationMixin.Navigate ]( {
            type: 'standard__component',
            attributes: {
                componentName: 'c__SampleAuraComponent'
            },
        } );

    }

}

js-meta.xml:

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

Leave a Reply