{"id":6920,"date":"2019-10-16T00:04:14","date_gmt":"2019-10-16T04:04:14","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6920"},"modified":"2020-06-10T10:52:46","modified_gmt":"2020-06-10T14:52:46","slug":"data-exchange-between-aura-lightning-web-components-lwc-and-visualforce","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","title":{"rendered":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce"},"content":{"rendered":"\n

Few months back, I wrote an article<\/a> on how pub sub model can be used to communicate between Lightning Web Components. In that blog post, we used external library to pass event from child to Lightning Web Components.<\/p>\n\n\n\n

Lightning Message Service<\/h2>\n\n\n\n

In Winter 20<\/a>, Salesforce released Lightning Message Service <\/strong>which can be used to exchange data between Visualforce, Aura Component and Lightning Web Components. Unlike previous process, we don’t need to import any external library like pub or sub. <\/p>\n\n\n\n

In this blog post, I would be creating Visualforce, Aura Component and Lightning Message Service <\/strong>and exchanging message between all of them using Lightning Message Service.<\/p>\n\n\n\n\n\n\n\n

Lightning Message Channel<\/h2>\n\n\n\n

At the heart of Lightning Message Service<\/strong>, we have Lightning Message Channel<\/strong>. Its basically name of Schema which will hold actual message. For sake of this blog post, create file LMSDemoWin.messageChannel-meta.xml<\/em> in folder messageChannels. <\/p>\n\n\n

\n<?xml version="1.0" encoding="UTF-8"?>\n<LightningMessageChannel xmlns="http:\/\/soap.sforce.com\/2006\/04\/metadata">\n   <masterLabel>LMS Demo<\/masterLabel>\n   <isExposed>true<\/isExposed>\n   <description>Winter 20 - LMS Demo.<\/description> \n<\/LightningMessageChannel>\n<\/pre><\/div>\n\n\n
Deploy Lightning Message Channel<\/h2>\n\n\n\n
Run below SFDX command to deploy this message channel on your Salesforce Org, run push command to deploy message channel on Scratch Orgs.<\/p>\n\n\n
\nsfdx force:source:deploy -p "force-app\/main\/default\/messageChannels\/"\n<\/pre><\/div>\n\n\n
Once, Lightning Message Channel created, let’s start by creating our components and first we will create below Visualforce Page.<\/p>\n\n\n
\n<apex:page>\n    <!-- Begin Default Content REMOVE THIS -->\n    <h1>Lightning Message Services - Demo - Winter 20<\/h1>\n    <div>\n        <p>Message To Send<\/p>\n        <input type="text" id="vfMessage" \/>\n        <button onclick="publishMessage()">Publish<\/button> \n        <br\/> \n        <button onclick="subscribeMC()">Subscribe<\/button> \n        <button onclick="unsubscribeMC()">Unsubscribe<\/button> \n        <br\/>\n        <p>Messages Received:<\/p>\n        <textarea id="txtMessages" rows="2" style=" width:100%;" \/>\n    <\/div>\n    <script> \n        \/\/ Load the MessageChannel token in a variable\n        var lmsDemoChannel = "{!$MessageChannel.LMSDemoWin__c}";\n        var subscriptionToMC;\n       function publishMessage() {\n            const payload = {\n                source: "Visualforce",\n                messageBody: document.getElementById('vfMessage').value\n            };\n            sforce.one.publish(lmsDemoChannel, payload);\n        }\n        function subscribeMC() {\n            if (!subscriptionToMC) {\n                subscriptionToMC = sforce.one.subscribe(lmsDemoChannel, onMCPublished);\n            }\n        }\n        function unsubscribeMC() {\n            if (subscriptionToMC) {\n                sforce.one.unsubscribe(subscriptionToMC);\n                subscriptionToMC = null;\n            }\n        }\n        function onMCPublished(message) {\n            var textArea = document.querySelector("#txtMessages");\n            textArea.innerHTML = message ? 'Message: ' + message.messageBody + ' From: ' + message.source : 'no message payload';\n        } \n    <\/script>\n<\/apex:page>\n<\/pre><\/div>\n\n\n
In above code, we have few functions to subscribe , Unsubscribe and publish Lightning Message Channel. We can follow any schema for payload however that has to be followed by all clients as well. In our case, we are passing source and actual message body.<\/em><\/p>\n\n\n\n
Next component we would build would be Aura Component<\/p>\n\n\n
\n<aura:component description="testMessageAura" implements="flexipage:availableForAllPageTypes" access="global">\n    <aura:attribute type="String" name="myMessage"\/>\n    <aura:attribute type="String" name="receivedMessage"\/>\n    <lightning:messageChannel type="LMSDemoWin__c" aura:id="lmsDemohannel" onMessage="{!c.handleReceiveMessage}"\/>\n\n    <lightning:card title="Aura Component" iconName="custom:custom18">\n        <div class="slds-m-around_medium">\n            <lightning:input type="text" value="{!v.myMessage}" label="Message To Send"\/>\n            <lightning:button label="Publish" onclick="{! c.handleClick}"\/>\n            <br\/>\n            <br\/>\n            <p>Latest Received Message<\/p>\n            <lightning:formattedText value="{!v.receivedMessage}"\/>\n        <\/div>\n    <\/lightning:card>\n<\/aura:component>\t\n\n<\/pre><\/div>\n\n\n
Controller of Aura Component<\/p>\n\n\n
\n({\n    handleClick: function(component, event, helper) {\n        let myMessage = component.get("v.myMessage");\n        const payload = {\n            source: "Aura Component",\n            messageBody: myMessage\n        };\n        component.find("lmsDemohannel").publish(payload);\n    },\n    handleReceiveMessage: function (component, event, helper) {\n        if (event != null) {\n            const message = event.getParam('messageBody');\n            const source = event.getParam('source');\n\n            component.set("v.receivedMessage", 'Message: ' + message + '. Sent From: ' + source);\n        }\n    }\n});\n<\/pre><\/div>\n\n\n
As you can see in above Aura Component, we are not doing anything special to subscribe or unsubscribe Lightning Message Channel<\/strong>. Aura Component by default handles those operations once we declare them. <\/p>\n\n\n\n
Last component we would be creating is Lightning Web Component <\/p>\n\n\n
\n<template>\n    <lightning-card title="LWC" icon-name="custom:custom18">\n        <div class="slds-m-around_medium">\n            <lightning-input label="Message To Send" type="text" value={_msg} onchange={handleChange}><\/lightning-input>\n            <lightning-button label="Publish" onclick={handleClick}><\/lightning-button>\n            <br>\n            <lightning-button label="Subscribe" onclick={handleSubscribe}><\/lightning-button>\n            <lightning-button label="Unsubscribe" onclick={handleUnsubscribe}><\/lightning-button>\n            <p> Message Received<\/p>\n            <lightning-formatted-text value={receivedMessage}><\/lightning-formatted-text>\n        <\/div>\n    <\/lightning-card>\n<\/template>\n<\/pre><\/div>\n\n\n
Javascript of LWC<\/p>\n\n\n
\nimport { LightningElement, track} from 'lwc';\nimport { publish,createMessageContext,releaseMessageContext, subscribe, unsubscribe } from 'lightning\/messageService';\nimport lmsDemoMC from "@salesforce\/messageChannel\/LMSDemoWin__c";\nexport default class LMS_MessageSenderReceiverLWC extends LightningElement {\n    @track _msg = '';\n    @track receivedMessage = '';\n    channel;\n    context = createMessageContext();\n\n    constructor() {\n        super();\n    }\n   \n    handleSubscribe() {\n        const parentPage = this;\n        this.channel = subscribe(this.context, lmsDemoMC, function (event){\n            if (event != null) {\n                const message = event.messageBody;\n                const source = event.source;\n                parentPage.receivedMessage = 'Message: ' + message + '. Sent From: ' + source;\n            }\n        });\n    }\n\n    handleUnsubscribe() {\n        unsubscribe(this.channel);\n    }\n\n    handleChange(event) { \n        this._msg = event.target.value;\n    }\n\n    handleClick() {  \n        const payload = {\n            source: "Lightnign Web Component",\n            messageBody: this._msg\n        }; \n        publish(this.context, lmsDemoMC, payload);\n    } \n\n    disconnectedCallback() {\n        releaseMessageContext(this.context);\n    }\n}\n<\/pre><\/div>\n\n\n
Once we embed all three components (Visualforce, Aura and Lightning Web Components), we would be able to see Lightning Message Service in action as shown in below image :<\/p>\n\n\n\n
\"\"
Lightning Message Service in Salesforce<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce<\/p>\n","protected":false},"author":1,"featured_media":6923,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[310,475,9,18],"tags":[478,477,462,503,464,336,476],"class_list":["post-6920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning","category-lightning-web-components","category-salesforce","category-visualforce","tag-lightning-message-channel","tag-lightning-message-service","tag-lightning-web-component","tag-lms","tag-lwc","tag-visualforce","tag-winter-20"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1978%2C1724&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6880,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-current-user-id-in-salesforce\/","url_meta":{"origin":6920,"position":0},"title":"Get Current User Id in Salesforce","author":"Jitendra","date":"February 2, 2019","format":false,"excerpt":"How to get Current Logged in user Id in Apex, Visualforce, Lightning Component and Formula fields in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":6920,"position":1},"title":"Salesforce interview question related to Lightning framework – Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7044,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/limitations-of-lwc\/","url_meta":{"origin":6920,"position":2},"title":"Limitations of LWC","author":"Jitendra","date":"April 22, 2020","format":false,"excerpt":"Considerations & Limitations of Lightning Web Component in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"LWC Not Supported","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":6920,"position":3},"title":"Lightning Web Component Event Handling – Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":5737,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/","url_meta":{"origin":6920,"position":4},"title":"Use Lightning Component in Visualforce Page","author":"Jitendra","date":"September 22, 2016","format":false,"excerpt":"How to use Lightning Out to surface Lightning Component on Visualforce Pages","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Components in Visualforce Pages","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Use-Lightning-Components-in-Visualforce-Pages.jpg?fit=862%2C501&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4287,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/learning-lightning-component-trailhead-way\/","url_meta":{"origin":6920,"position":5},"title":"Learning Lightning Component – Trailhead way","author":"Jitendra","date":"March 19, 2015","format":false,"excerpt":"In Previous article, I\u00a0have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it. Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Learn Lightning Component Trailhead way","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6920"}],"version-history":[{"count":3,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6920\/revisions"}],"predecessor-version":[{"id":7108,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6920\/revisions\/7108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6923"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}