5

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.

  • I would caution you to learn the difference between aura-components and lightning web components, I edited your question to help clarify a bit (based on the information in the accepted answer) as to when you mean the aura component vs when you mean the lwc. Even then, I'm not entirely sure that you don't just mean 2 different aura-components. – gNerb Jul 29 at 19:35
  • Everything written in there was accurate, so I suggest to rollback your edit. I clearly mentioned the fact that I'm using the @api decorator in the LWC and as far as I know this is not available in aura. Or maybe I just need to deepen my aura knowledge. – Teodora Jul 30 at 8:30
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.