Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    • Top 10 PMD Issues Salesforce Developers Should Focus on in Apex
    • How to Use Graph API for Outlook-Salesforce Connection
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Friday, May 30
    • Home
    • Architecture
    • Salesforce
      • News
      • Apex
      • Integration
      • Books Testimonial
    • Questions
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Integration Posts
    • Downloads
    • About Us
      • Privacy Policy
    SalesforceCodex
    Home»Salesforce»Communicate Across Salesforce UI Technologies with Lightning Message Service

    Communicate Across Salesforce UI Technologies with Lightning Message Service

    Dhanik Lal SahniBy Dhanik Lal SahniAugust 27, 20191 Comment3 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Communicate Across Salesforce UI Technologies with Lightning Message Service
    Share
    Facebook Twitter LinkedIn Pinterest Email

    There are lot of issue in communication between Visual Force Pages, Lightning Component and Lightening Web Component.  We used to use Window object to communicate between these pages.

    Salesforce has introduce Lightning Message Service API in Winter’20 to communicate across the DOM, between Aura components, Visualforce pages, and Lightning web components. If application switching from Salesforce Classic to Lightning Experience, we can now build Lightning web components that can communicate with existing Visualforce pages or Aura components.

    A Lightning web component uses a Lightning Message Channel to access the Lightning Message Service API. Reference Lightning Message Channel with the scoped module @salesforce/messageChannel. In Visualforce, use the global variable $MessageChannel. In Aura, use lightning:messageChannel in your component.

    When we can use Lightning Message Service :

    In Lightning Experience, we often have multiple components on a page. Currently, if we wanted a Visualforce page to communicate with a Lightning web component in Lightning Experience, we have to implement a custom publish-subscribe solution. Now, we can use the Lightning Message Service API to handle that communication.

    How to Implement:

    Let us take example, we have created a message channel called SampleMessageChannel__c using the Metadata API.  See how a message channel is published in Lightning web component and subscribed in Visual Force Page.

    Create a Lightning web component called publisherComponent that publishes on SampleMessageChannel__c, which is the API name of the message channel. The component imports methods to publish on a message channel from the lightning/messageService module. This module accesses the Lightning Message Service API.

    Next, import the message channel from @salesforce/messageChannel/SampleMessageChannel__c and assign it to the identifier SAMPLEMC.

    // publisherComponent.js
    import { LightningElement } from 'lwc';
    import { publish,createMessageContext,releaseMessageContext } from 'lightning/messageService';
    import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";
    
    export default class MyLwcPublisher extends LightningElement {
        context = createMessageContext();
        constructor() {
            super();
        }
        handleClick() {
            const message = {
                recordId: "some string",
                recordData: {
                    value: "some data"
                }
            };
            publish(this.context, SAMPLEMC, message);
        }
        disconnectedCallback() {
            releaseMessageContext(this.context);
        }
    }

    The handleClick() method holds the data to be published on the message channel. In this example, the data is a recordId with the value “some string” and recordData, whose value is the key-value pair value: “some data”. Publish the data by calling the publish()method imported from the lightning/messageService module.

    In component’s HTML template file, include a Publish button that calls the handleClick() method. Clicking the button publishes the record data to SampleMessageChannel__c. The subscribing Visualforce page then receives that data.

    <-- publisherComponent.html -->
    <template>
        <lightning-card title="MyLwcPublisher" icon-name="custom:custom14">
            <div class="slds-m-around_medium">
                <p>MessageChannel: SampleMessageChannel</p>
                <br>
                <lightning-button label="Publish" onclick={handleClick}></lightning-button>
            </div>
        </lightning-card>
    </template>

    Subscriber (Visual Force Page) :

    We can subscribe and unsubscribe a Visualforce page from a message channel SampleMessageChannel__c on which a Lightning web component publishes.

    <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>

    Reference : https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lc_message_channel.htm

    lightning Lightning message service Lightning web component
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleSalesforce Winter 20 Release – Feature Enhancements In Lightning Community
    Next Article Salesforce Winter 20 Release – Feature Enhancements For Development
    Dhanik Lal Sahni
    • Website

    Related Posts

    By Dhanik Lal Sahni4 Mins Read

    How to Build a Generic Modal Window in Lightning Web Component

    May 26, 2025
    By Dhanik Lal Sahni6 Mins Read

    Top 10 Salesforce Flow Features of Salesforce Summer ’25

    May 11, 2025
    By Dhanik Lal Sahni6 Mins Read

    Unlock the Power of Vibe Coding in Salesforce

    April 30, 2025
    View 1 Comment

    1 Comment

    1. Pingback: Salesforce Winter 20 Release – Code Enhancement in Lightning Web Component - SalesforceCodex

    Leave A Reply Cancel Reply

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (111) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) file upload (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (30) Lightning web component (62) lwc (51) named credential (8) news (4) optimize apex code (4) Permission set (4) pmd (3) Queueable (9) rest api (23) S3 Server (4) salesforce (141) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (111) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) file upload (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (30) Lightning web component (62) lwc (51) named credential (8) news (4) optimize apex code (4) Permission set (4) pmd (3) Queueable (9) rest api (23) S3 Server (4) salesforce (141) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.