Developers

What is Lightning Message Service? Visualforce, LWC + Aura Components

By Ravinder Bharti

Over time, upgrading to newer technologies is important to leverage the overall functionality of your Salesforce org and see a return on investment. Just as Salesforce users need to go through a gradual shift from Classic to Lightning Experience, developers also need this shift as technologies advance.

One such shift occurred in the Winter ‘20 Salesforce release: the launch of Lightning Message Service. In this post, we’ll explore Lightning Message Service (LMS), how, why and when you should use it.

What is Lightning Message Service?

Lightning Message Service (LMS) is the first Salesforce technology of its kind that facilitates communication between Visualforce, Lightning Web Components, and Aura Components on a Salesforce Lightning Page.

With the launch of LMS, Salesforce developers obtained a simple and seamless API for publishing messages throughout the Lightning Experience platform and subscribed to messages that originated from anywhere within Lightning Experience.

LMS provides you with improved communication between Visualforce pages and Lightning Components to help you migrate more easily from Classic to Lightning Experience.

In simple terms, the use of LMS prevents you from having to get rid of existing Visualforce pages and completely replace them with new Lightning Components. According to the developers at Public Media Solution, LMS has made it easier to update your existing Visualforce pages to engage with the new Lightning Components.

Salesforce explains:

“LMS has smashed both of those barriers with an easy to use API implemented in LWC, Aura, and Visualforce. This allows publishing and subscribing to and from any of these technologies in the same Salesforce UI. It even allows pub/sub between the utility bar, utility bar popups, and the rest of your application’s UI.”

Source: Learn MOAR: Lightning Message Service Generally Available in Summer ’20

When Should You Use Lightning Message Service?

According to the Salesforce developers and consultants at Techila Global Services, Lighting Message Service works best for organizations wanting a seamless migration from Classic to Lightning Experience. If you are a developer nervous about learning the language of Lightning Components and working with raw iframes or postMessage, this technology will definitely make things easier for you.

Using LMS will mean you can avoid completely rebuilding existing Visualforce pages, instead, allowing them to communicate with Lightning Components.

“Use Lightning message service to communicate across the DOM within a Lightning page. Communicate between Visualforce pages embedded in the same Lightning page, Aura components, and Lightning web components, including components in a utility bar and pop-out utilities. Choose whether a component subscribes to messages from the entire application, or from only the active area.

If you’re switching from Salesforce Classic to Lightning Experience, you can build Lightning web components that communicate with existing Visualforce pages or Aura components.”

Source: Communicate Across the DOM with Lightning Message Service

How Does Lightning Message Service Work?

To make Lightning Message Service work as a developer, you will need to work with a new type of metadata – Lightning Message Channels.

What Is A Lightning Message Channel?

Message channels are new lightweight and easily packageable components that can be created by developers for publishing and subscribing messages on them at runtime.

By virtue of being packageable, developers can associate a message channel with a suitable namespace. You also have the option of making your Message Channel available to other namespaces.

A Message Channel can be easily created with the help of VS code and Salesforce CLI. You can start by creating a folder named “messageChannels” in the App, Main, or Default folder. Next, create a new file with “messageChannel-meta.xml” as an extension inside the folder you created. The contents within the file should look similar to the following:

Here, the masterLabel tag will be followed by the name of your Message Channel (“SampleMessageChannel” as mentioned above). The lightningMessageField tag defines the fields carrying the event payload. If you want to keep more than one field in the event payload, you can use multiple lightningMessageField tags. The isExposed tags are used to allow the channel to be used across namespaces.

After you are done creating a message channel file, you can deploy it to your Salesforce org and start using it.

How To Publish To A Message Channel?

For publishing to a Message Channel, “publisher” will be the first component to be used.

In the Javascript file of the component, import all the elements needed from the lightning/messageService module and the messageChannel defined previously. Here, we will go ahead with publish and MessageContext from messageService.

Once you are done with the imports, you need to create the message context. This can either be done by using the createMessageContext() method or (if the components extends LightningElement) by using the syntax as follows:

Your setup is now complete, ready to publish to the Message Channel. Now, you need to make a call to “publish.” The publish method takes three arguments into consideration: the message context, the message channel, and the message itself. The message here is an object containing the fields defined in your Message Channel file.

Using Lightning Message Service With Visualforce

Salesforce has introduced three sforce.one APIs named “publish”, “subscribe”, and “unsubscribe” in Visualforce for interacting with Lightning Message Service.

The message channel reference is the first parameter to publish and subscribe. You can get this parameter from a new $MessageChannel Global variable within a {! } formula expression.

Here is the sample of a Visualforce page referencing the “SampleMessageChannel” Lightning Channel:

The call to the “subscribe” API is similar but the second parameter will take a callback function that gets invoked with a message being published on that channel. “Subscribe” will return a handle which can be passed into “unsubscribe” if you don’t want to listen on that message channel anymore.

Here is a sample to demonstrate how to “subscribe” and “unsubscribe” on Visualforce:

Summary

When an organization is making the shift to an upgraded interface such as Lightning Experience, it is important to make sure that the switch is seamless and sustainable. With the introduction of Lightning Message Service, Salesforce facilitates such migration through effective communication between Visualforce, Lightning Web Components and Aura Components.

Please reach out to Support@salesforceben.com if you would like the code.

The Author

Ravinder Bharti

Founder & CEO | Investor | Media Partner | Growth Hacker

Leave a Reply