[SalesForce] window.postMessage does not work in lightning console app. Any workaround

We have an flexipage/app which have 5 lightning components on it. Out of these 5, 3 are lightning component and 2 are visual force pages embedded inside lightning component.

I went through https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html and I am posting events and catching the events on the cards. This works perfectly when a single tab is opened on the lightning console app.

But when multiple tabs are opened with different data, the first tab reloads and posts the event window.postMessage(response, '*');. Now as it is posting events to the window the second tab also listens to the message and reloads the components as javascript code remains same.

Has anyone faced this issue till now?

Still did not find a solution for this. The issue is we can have multiple tabs and subtabs opened, and each tabs and subtabs are having same header components which posts the message, now as far as I know, lightning console does not generate different javascript from the component for each tab and subtab. it uses the same javascript every where, thus the given solution fails .

If there is a way to postMessage to a particular tab or subtab then it would be helpful.

Best Answer

This is an expected behaviour since postMessage with targetOrigin '*' sends the message with no target preference and your tabs are in the same lightning container.

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

What you can do is you can send the id of the data you are handling for each tab as part of the message and use it to decide if you want to do event handling or not.

There is an explanation about one-to-many communication here in One-to-One vs One-to-Many Messaging Scheme.

var message = {
   objectId: "your-object-id",
   payload: payload
 };
 window.postMessage(message, '*');

In receiving end:

if (event.data.objectId === "your-object-id") {
    // Handle the message
    console.log(event.data.payload);
}

Also it is a good idea to specify targetOrigin as using '*' is not safe depending on the data you are sending.

Documentation on postMessage

Place both on same Lightning Record Page in Lightning-console app

AppEventFire.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
  <c:EventService aura:id="eventService"/>
  <lightning:button label="Fire App Event" onclick="{! c.handleFireAppEventClick }"/>
</aura:component>

AppEventFireController.js

({
  handleFireAppEventClick : function(component, event, helper) {
    var eventService = component.find("eventService");
    eventService.fireAppEvent("TEST_RECORD_EVENT_FIRE");
  }
})

AppEventListener.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

    <aura:handler event="c:ServiceAppEvent" action="{! c.handleApplicationEvent }"/>

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    <force:recordData aura:id="recordHandler"
      recordId="{!v.recordId}"
      layoutType="FULL"
      targetRecord="{!v.record}"
      targetFields="{!v.simpleRecord}"
      targetError="{!v.recordError}"
      mode="EDIT"
      />

    {! v.simpleRecord.AppEventCount__c }

</aura:component>

AppEventListenerController.js

({
  handleApplicationEvent : function(component, event, helper) {
    var params = event.getParams();

    switch(params.appEventKey) {
      case "TEST_RECORD_EVENT_FIRE":
        var currentCount = component.get("v.simpleRecord.AppEventCount__c");
        currentCount++;
        component.set("v.simpleRecord.AppEventCount__c", currentCount);

        component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
          if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
            component.find("recordHandler").reloadRecord();
          }
        }));
        break;
    } 
  },
})

Then open up two records within the same Lightning-console app, fully load both (so that the fire.cmp and listener.cmp exist, are rendered). You'll see that if you fully load two Lightning-console app tabs, then click the button from either one, both will receive it. I'm writing to server to verify that these application events persist and it's not just a trick of browser / component memory.

P.S. I've added what I'm calling a Record Event to my framework which deals with this very specific issue, very specifically inside lightning-console apps. I'll update my framework repo when I get some time.

Best Answer

Related Solutions

Lightning – Application Event Scope in Lightning Console Apps Across Tabs

Place both on same Lightning Record Page in Lightning-console app

Related Topic