2

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.

Attempts:

  • 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

0

Add into your LWC JS Controller:

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

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

.CMP:

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

.JS:

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

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

.APP:

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

Embed your AuraAppContainer encapsulated LWC into the VFP:

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

You must log in to answer this question.

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