Working a classic org that is trying to iteratively add LWCs for future migration.

Successfully created and deployed the LWC into a VFP, functions as expected.

We would like to add open a classic console tab functionality triggered from a button click in the LWC.

However, we're running into a lot of trouble getting any of the events/messages out of the LWC and into the parent frame (a classic VFP) to open a classic console tab.


  • LMS (Not supported in Classic)
  • PostMessage (Message never seems to make it out of the LWC to the parent VFP, tried iterating through parent frames, few different origin configurations. I did confirm the VFP could receive events, just not the events from this or any LWC)
  • LocalStorage (Unsupported in IE11)

I've seen a few posts with success about postMessage, but the flow is backwards, coming from the VFP into the child LWC.

This seems similar, and I plan to try this and report back, but this is for Aura components, and will have to experiment on traversing through LWC -> Aura -> VFP: How do I Call Methods in the Console Integration Toolkit from a Lightning Component?

Any other thoughts on this one?

1 Answer 1


Add into your LWC JS Controller:

var eventPayload = {
    action: 'openPrimaryTab',
    body: '/apex/accountDetail'
const actionEvent = new CustomEvent('LWCOutEvent', {
    detail: {eventPayload},

Create an encapsulating Aura Component for your LWC (new Aura component):


<aura:registerEvent name="AuraToVFPEventReceiver" type="c:AuraToVFPEventReceiver" />
<c:yourLWC onLWCOutEvent="{!c.eventReceived}"/>


    eventReceived: function(component, event, helper) {
        var thisEvent = $A.get("e.c:AuraToVFPEventReceiver");
        var payload = event.getParam('eventPayload');

Add your Aura Component to the shared LWC Aura App as a dependency:


<aura:application access="GLOBAL" extends="ltng:outApp" >
<aura:dependency resource="c:auraWrapper_LWCName"/>
<aura:dependency resource="c:auraWrapper_yourLWCName"/>

Embed your AuraAppContainer encapsulated LWC into the VFP:

<div id="RenderYourLWCName" />
    $Lightning.use("c:AuraAppContainerForLWCs", function() {
            function(cmp) {
                $A.eventService.addHandler({ "event": "c:AuraToVFPEventReceiver", "handler" : visualForceFunction});
    var visualForceFunction = function(event){
    var action = event.getParam("action");
    var body = event.getParam("body");

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .