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?

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>

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.