Lightning Message Service (LMS) in Salesforce: A Complete Guide

Lightning Message Service (LMS) in Salesforce: A Complete Guide 

Introduction 

Salesforce introduced Lightning Message Service (LMS) to facilitate seamless communication between Lightning Web Components (LWC), Aura Components, and Visualforce pages, even when they are hosted on different Lightning pages. This feature eliminates the need for complex event propagation mechanisms, making it an efficient way to exchange data across different UI components. 

What is Lightning Message Service (LMS)? 

LMS is a publish-subscribe mechanism that enables communication between: 

• Lightning Web Components (LWC) 

• Aura Components 

• Visualforce Pages 

LMS is built on the Lightning Message Channel (LMC), which acts as a medium for message exchange. 

Why Use LMS? 

1. Cross-Domain Communication: Enables communication between different frameworks (LWC, Aura, and Visualforce). 

1. Decoupled Components: No need for parent-child relationships, making components independent yet interactive. 

1. Better Performance: Eliminates the need for complex event handling mechanisms. 

1. Secure Communication: Uses Lightning Message Channel (LMC), ensuring secure data transmission. 

Steps to Implement Lightning Message Service 

Let’s go step by step to implement LMS in Salesforce. 

Step 1: Create a Lightning Message Channel (LMC) 

1. In VS Code, navigate to your Salesforce DX Project. 

1. Create a new Lightning Message Channel file under force-app/main/default/messageChannels/. 

1. Name the file SampleMessageChannel.messageChannel-meta.xml and add the following code: 

<?xml version=”1.0″ encoding=”UTF-8″?> 

<LightningMessageChannel xmlns=”http://soap.sforce.com/2006/04/metadata” 

    fqn=”SampleMessageChannel”> 

    <isExposed>true</isExposed> 

    <lightningMessageFields> 

        <fieldName>messageContent</fieldName> 

    </lightningMessageFields> 

</LightningMessageChannel> 

1. Deploy this file to Salesforce. 

Step 2: Create the Publisher Component in LWC 

The publisher component will send messages via the Lightning Message Channel. 

// publisher.js 

import { LightningElement, wire } from ‘lwc’; 

import { publish, MessageContext } from ‘lightning/messageService’; 

import SAMPLE_MESSAGE from ‘@salesforce/messageChannel/SampleMessageChannel__c’; 

 

export default class Publisher extends LightningElement { 

    @wire(MessageContext) 

    messageContext; 

 

    handleClick() { 

        const message = { 

            messageContent: ‘Hello from Publisher!’ 

        }; 

        publish(this.messageContext, SAMPLE_MESSAGE, message); 

    } 

} 

<!– publisher.html –> 

<template> 

    <lightning-card title=”Publisher Component”> 

        <lightning-button label=”Send Message” onclick={handleClick}></lightning-button> 

    </lightning-card> 

</template> 

Step 3: Create the Subscriber Component in LWC 

The subscriber component will receive messages from the Lightning Message Channel. 

// subscriber.js 

import { LightningElement, wire } from ‘lwc’; 

import { subscribe, MessageContext } from ‘lightning/messageService’; 

import SAMPLE_MESSAGE from ‘@salesforce/messageChannel/SampleMessageChannel__c’; 

 

export default class Subscriber extends LightningElement { 

    receivedMessage = ”; 

 

    @wire(MessageContext) 

    messageContext; 

 

    connectedCallback() { 

        subscribe(this.messageContext, SAMPLE_MESSAGE, (message) => { 

            this.receivedMessage = message?.messageContent || ‘No message received’; 

        }); 

    } 

} 

<!– subscriber.html –> 

<template> 

    <lightning-card title=”Subscriber Component”> 

        <p>Received Message: {receivedMessage}</p> 

    </lightning-card> 

</template> 

Step 4: Add Components to a Lightning Page 

1. Deploy the components to Salesforce. 

1. Open App Builder, create a new Lightning App Page, and add the Publisher and Subscriber components. 

1. Save and Activate the page. 

Step 5: Test the Implementation 

1. Click the Send Message button in the Publisher component. 

1. Observe the message appearing in the Subscriber component instantly. 

Conclusion 

Lightning Message Service (LMS) simplifies communication across Lightning Web Components, Aura, and Visualforce by introducing a centralized Message Channel. This feature significantly enhances the efficiency, security, and flexibility of inter-component communication in Salesforce applications. Start implementing LMS today to streamline data exchange in your Salesforce org!