Apex Code Development You need to sign in to do that
Don't have an account?
Teodora How to open LWC in a new page from Record Detail
I have created a LWC which uses the @api recordId in order to query some data from the apex controller. It all works properly when using the LWC 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:
The second one just opens the first one in a new tab and passes over the record id:
and the controller:
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 LWC? Using this approach is seems like I cannot retrieve it.
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:testLWC 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 LWC? Using this approach is seems like I cannot retrieve it.
e.force:navigateToComponent is deprecated. I won't recommend using it.
Instead use lightning:navigation , you generate state(aka URL params) by setting page references. 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 tabNow you have to make your LWC component listen to pageReference and get the 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 } }Thanks,Nagendra