Using Events with the Lightning Console JavaScript API

Work with Events in Lightning Web Components (LWC)

A Lightning Message Service (LMS) channel is created for each of Aura tab events. The payloads on the LMS channels are the same as those on the Aura events. Subscribe to the Lightning message channels corresponding to the Aura application events you want to listen for.

Subscribe to LMS Channels in LWC

To subscribe to an LMS channel, import the lightning/messageService module and the channel you want. This example imports the @salesforce/messageChannel/lightning__tabCreated channel and subscribes to messages that are published over the channel.

Subscribe when the component is created and unsubscribe when the component is destroyed. For more information, see Subscribe and Unsubscribe from a Message Channel.

1import { LightningElement, wire} from 'lwc';
2import { MessageContext, subscribe, unsubscribe } from 'lightning/messageService';
3import tabCreatedChannel from "@salesforce/messageChannel/lightning__tabCreated";
4
5export default class MyComponent extends LightningElement {
6   @wire(MessageContext) messageContext;
7   messageSubscription = null;
8  
9   connectedCallback() {
10      this.unsubscribe();
11      this.messageSubscription = subscribe(this.messageContext, tabCreatedChannel, (message) => {
12        this.handleMessage(message);
13      });
14   }
15   disconnectedCallback() {
16      this.unsubscribe();
17   }
18  
19   unsubscribe() {
20      if (!this.messageSubscription) {
21         return;
22      }
23      unsubscribe(this.messageSubscription);
24      this.messageSubscriptions = null;
25   }
26   
27   handleMessage(message) {
28     if (!message || !message.tabId) {
29        return;
30     }
31     const tabId = { message };
32     console.log(`Tab with tabId of ${tabId} is created.`);
33   }
34}

Work with Events in Aura Components

Events are fired from JavaScript controller actions. Events can contain attributes that can be set before the event is fired and read when the event is handled. Each event that works with Lightning console apps returns attributes that can be read once the event is fired. See the reference section of this guide for a list of attributes returned by each event.

To use console events, set up a handler in your Aura component. The following handler, for example, listens for the lightning:tabCreated event, and calls the onTabCreated function in the component’s controller when the event occurs.

1<aura:handler event="lightning:tabCreated" action="{! c.onTabCreated }"/>

Let’s look at a more fleshed out example. The following component uses the lightning:tabClosed event.

1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2<aura:handler event="lightning:tabClosed" action="{! c.onTabClosed }"/>
3</aura:component>

When a tab is closed, the event handler calls onTabClosed in the component’s controller, which logs the tabId of the closed tab.

1({
2  onTabClosed : function(component, event, helper) {
3    var tabId = event.getParam("tabId");
4    alert(“Tab with tabId of “ + tabId + “ was just closed.”);
5  }
6})

You can use Lightning console events with the Workspace API and Utility Bar API to customize your users’ experience. You can, for example, give a tab focus when it’s refreshed, or notify the user with a modal dialogue when a tab is replaced.