Communicate Across Salesforce UI Technologies with Lightning Message Service (Generally Available)

Use Lightning message service to communicate across the DOM—between Visualforce pages, Aura components, and Lightning web components, including components in a utility bar. You can use it to communicate between components within a single Lightning page or across multiple pages. If you’re switching from Salesforce Classic to Lightning Experience, you can now build Lightning web components that can communicate with existing Visualforce pages and Aura components. You can also use Lightning message service to communicate with softphones via Open CTI.

Where: This feature is available in Lightning Experience. To create a Lightning message channel, use Enterprise, Performance, Unlimited, and Developer editions.

How: Components and pages communicate over Lightning message channels. In this example, a Visualforce page subscribes to a message channel on which a Lightning web component publishes.

// publisherComponent.js
import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";

export default class PublisherComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;

    handleClick() {
        const message = {
            recordId: "001xx000003NGSFAA4",
            recordData: {
                value: "Burlington Textiles Corp of America"
            }
        };
        publish(this.messageContext, SAMPLEMC, message);
    }
}

The Visualforce page subscribes to the same message channel.

<apex:page>
    <div>
        <p>Subscribe to SampleMessageChannel</p>
        <button onclick="subscribeMC()">Subscribe</button>
        <p>Unsubscribe from SampleMessageChannel</p>
        <button onclick="unsubscribeMC()">Unsubscribe</button>
        <br/>
        <br/>
        <p>Received message:</p>
        <textarea id="MCMessageTextArea" rows="10" style="disabled:true;resize:none;width:100%;"/>
    </div>
    <script>
        // Load the MessageChannel token in a variable
        var SAMPLEMC = "{!$MessageChannel.SampleMessageChannel__c}";
        var subscriptionToMC;
        // Display message in the textarea field
        function onMCPublished(message) {
            var textArea = document.querySelector("#MCMessageTextArea");
            textArea.innerHTML = message ? JSON.stringify(message, null, '\t') : 'no message payload';
        }

        function subscribeMC() {
            if (!subscriptionToMC) {
                subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished});
            }
        }

        function unsubscribeMC() {
            if (subscriptionToMC) {
                sforce.one.unsubscribe(subscriptionToMC);
                subscriptionToMC = null;
            }
        }
    </script>

</apex:page>
Important

Important

If you worked with Lightning message service in beta, note the following change for the GA release. In the beta release, the subscribe() method included a scope parameter, with a single default value of "APPLICATION". Scope defines where subscribing components receive messages in your application. The Lightning message service now lets you limit scope to the active area only (default) or include the entire application. Diagram illustrating active subscription scope regions versus application subscription scope regions

To specify active scope, you don’t need to include the scope parameter, since it's the default behavior. To specify scope for the entire application, continue to use the scope parameter with a value of "APPLICATION". When using the active scope, a message channel is limited to communication between components in an active navigation tab, an active navigation item, or a utility item. Utility items are always active. A navigation tab or item is active when it’s selected. Navigation tabs and items include:
  • Standard navigation tabs
  • Console navigation workspace tabs
  • Console navigation subtabs
  • Console navigation items