[SalesForce] Open LWC page from Salesforce aura component controller

My requirement is open the LWC page from Aura component controller.
So I did all the steps which mentioned in the link How to open LWC in a new page from Record Detail Aura Component but getting an error "This page isn't available in Salesforce Lightning Experience or mobile app."

My requirement is a little bit different- Open the LWC page in the same window without any tab. I am using the below code in Aura component controller.

createProactiveLWC : function(cmp,event,helper){
   var navService = cmp.find("navService");
        // Sets the route to /lightning/o/Account/home
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c:proactiveLWCForm'//I tried with c__proactiveLWCForm and c__c:proactiveLWCForm
            },
            state : {
                c__recordId : cmp.get('v.recordId')
            }
        };

        // Set the URL on the link or use the default if there's an error
        var defaultUrl = "#";
        navService.generateUrl(pageReference).then($A.getCallback(function(url) {

        }));
}

Best Answer

URL addressable tabs are currently not supported for LWC components as documented in Unsupported Experiences and Tools

Also from Documentation:

To make an addressable Lightning web component, embed it in an Aura component that implements the lightning:isUrlAddressable interface.

So embed LWC component in Aura component and have navigation to that component - using isUrlAddressable interface.

Also, pls note that the URL parameters are accessable in LWC component directly. You need not pass them from Aura component.

import { LightningElement, track, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from 'lightning/navigation';

export default class Poc extends NavigationMixin(LightningElement) {
    @wire(CurrentPageReference)
    setCurrentPageReference(currentPageReference) {
        this.currentPageReference = currentPageReference;
    }
    connectedCallback(){
        console.log("URL Parameters => ", this.currentPageReference.state);
    }
}

As shown above, use wire service to get the URL parameters (as state) in LWC component

Related Solutions

[SalesForce] How to open LWC in a new page from Record Detail Aura Component

e.force:navigateToComponent is deprecated. I wont recommend using it.

Instead use lightning:navigation , you generate state(aka URL params) by setting page references.

<lightning:navigation aura:id="navService"/>

JS:

 var navService = cmp.find("navService");
    // Sets the route to /lightning/o/Account/home
    var pageReference = {
        type: 'standard__component',
        attributes: {
            componentName: 'c:testContainer'
        },
        state : {
            c__recordId : cmp.get('v.recordId');
        }
    };

    // Set the URL on the link or use the default if there's an error
    var defaultUrl = "#";
    navService.generateUrl(pageReference).then($A.getCallback(function(url) {
        window.open(url,'_blank'); // This will open in new tab with pageReference with state/URL params you sent while creating instance of pageReference
    }

In your client-side aura controller, set the pageReference attribute for the Component . Set the URL on your link using the generateUrl() method, which is useful for opening links in a new tab

Now you have to make your LWC component listen to pageReference and get state(the recordId that we sent)

you can do that in your lwc by declaing @wire(CurrentPageReference)

import { CurrentPageReference } from 'lightning/navigation';

export default class TestLWC {


     // Injects the page reference that describes the current page
    @wire(CurrentPageReference)
    currentPageReference; 

    get recordIdFromState(){
        return this.currentPageReference &&
            this.currentPageReference.state.c__recordId; // Once you have recordId you can call apex
    }
}

[SalesForce] Invoking LWC component from a plain URL – Read URL Parameter inside LWC

The best way to get parameters from URL is use CurrentPageRefference.

currentPageReference.state allows you to get params.

import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class Test extends LightningElement {

    currentPageReference = null; 
    urlStateParameters = null;

    urlId = null;
    urlLanguage = null;
    urlType = null;

    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
       if (currentPageReference) {
          this.urlStateParameters = currentPageReference.state;
          this.setParametersBasedOnUrl();
       }
    }

    setParametersBasedOnUrl() {
       this.urlId = this.urlStateParameters.id || null;
       this.urlLanguage = this.urlStateParameters.lang || null;
       this.urlType = this.urlStateParameters.type || '10';
    }
}

More details you can find here https://salesforceprofs.com/how-to-get-url-params-in-lwc/

Best Answer

Related Solutions

[SalesForce] How to open LWC in a new page from Record Detail Aura Component

[SalesForce] Invoking LWC component from a plain URL – Read URL Parameter inside LWC

Related Topic