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

I have created a aura component which uses the @api recordId in order to query some data from the apex controller. It all works properly when using the aura component on the record detail page.

The problem is that I need to open the LWC in a new browser tab. I'm not sure what the right approach is in this case. So far I have created two Lightning components in order to achieve this:

The first one(testContainer) includes the LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
    <c:testaura component name="Test" />
</aura:component>

The second one just opens the first one in a new tab and passes over the record id:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
    <div class="slds-text-align_center">Loading...</div>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>

and the controller:

({
    doInit : function(component, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "c:testContainer",
            componentAttributes: {
                recordId : component.get("v.recordId")
            }
        });
        evt.fire();
    }
})

Is there a simpler approach to open a LWC in a new tab from a record detail page? If not, then how can I get the record id from the aura component? Using this approach is seems like I cannot retrieve it.

Best Answer

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
    }
}
Related Topic