Custom Popup Opening in all Tabs of Lightning service console

Question

I have a lightning component, which is added to the Account lightning page. lightning component opens a popup. This Popup opens on some conditions.

If I open 4 account records in different tabs in the console, popup is appearing in all 4 console tabs. What I want is to open this in one tab.

Lightning Component:

<aura:component controller="CustomController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >


    
<aura:attribute name="isOpen" type="boolean" default="false"/>
        <lightning:messageChannel type="purecloud__ClientEvent__c" aura:id="clientEventMessageChannel" onMessage="{!c.onClientEvent}" scope="APPLICATION"/>
        
        <div>
          
        <aura:if isTrue="{!v.isOpen}">
            <!--###### MODAL BOX Start######--> 
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- ###### MODAL BOX HEADER Start ######-->
                    
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        
                        <lightning:button variant="brand" 
                                          label="Save"
                                          title="Save"
                                          onclick="{! c.saveClose }"/>
                    </footer>
                </div>
            </section>
           
        </aura:if>
    </div>
</aura:component> 

Controller:

var action1 = component.get("c.getTaskRecords");
                action1.setParams({
                    interactionIds : eventIdData
                });
                action1.setCallback(this, function(response) {
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        var list = response.getReturnValue();
                        console.log('>>> list... '+JSON.stringify(list))
                        component.set("v.taskid",list.Id);
                        component.set("v.segmentValue",list.Segment__c);
                        component.set("v.activityTypeValue",list.Activity_Type__c);
                        let recId = component.get("v.recordId");
                        console.log('>>> recId... '+recId);
                        if(list.Id == recId || list.WhatId == recId){
                            console.log('>>> If Condition is true... ');
                            component.set("v.isOpen",true);
                        }
                    }else{
                        console.log('>>> state in task method... '+state);
                    }
                })
                $A.enqueueAction(action1);

In my console log, I can see only one If Condition is true, which is setting isOpen to true, to open popup. But this component is opening popup in all 4 tabs.

How can I resolve this issue?

Answer 1

When using console tabs, you have to be aware of cross tab issue. The above code does not show from where the above code is getting called.

But seeing Application event I believe this might be getting triggered inside onClientEvent, that is why all four tabs might be listening to the event and opening respective modals.

So you can need to get the enclosedtabId using workspaceapi and pass tabid along with the message of the event. So that you can do a getEnclosedTabId in this onClientEvent and check if the tabId from the event is equal to the enclosedtabId. Then only run component.get("c.getTaskRecords");.

NOTE : If the action is not triggered from Application event listener, then if you can explain from where the action is getting triggered then will be able to help you better, as I have extensively worked on console tab cross tab issues.