Lightning Message Service (LMS) in LWC

 Lightning Message Service (LMS) in LWC Salesforce. LMS doesn’t need any relationship between the component. Just publish the event from one component and subscribe by multiple components simultaneously.

lightning-message-service-(lms)-in-lwc-output

Key Highlights :

1. Lightning Message Service is based on a new type of metadata: Lightning Message Channels
2. Enable communication between the Visualforce page, Lightning web components, and Aura components.
3. In LWC we will be using LMS when we want to send data from one LWC to another LWC which are not in the hierarchy.

Process & Code :

Step 1: Here we will create a Lightning Message Service (LMS) file in the messageChannels folder in the default branch.

lightning-message-services-(lms)-in-lwc-folder-creatation

TechdicerChannel.messageChannel-meta.xml :

1 2 3 4 5 6 7 8 9 10

<?xml version="1.0" encoding="UTF-8"?> <LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">     <description>This is a Lightning Message Service Channel.</description>     <isExposed>true</isExposed>     <lightningMessageFields>         <description>This is sample message</description>         <fieldName>message</fieldName>     </lightningMessageFields>     <masterLabel>TechdicerChannel</masterLabel> </LightningMessageChannel>

Step 2: In this step, we will create two LWC component which is not related to each other, one is the Publisher and another one is the Subscriber component.

lWCLMS.HTML : this is the Publisher component.

1 2 3 4 5 6 7 8 9 10 11

<template>     <lightning-card title="Lightning Message Service (LMS) in LWC Publisher" icon-name="standard:contact">         <div class="slds-p-horizontal_small">             <lightning-input type="text" label="Message" onchange={handleChange} value={message}></lightning-input>             <!-- call subscriber -->             <div class="slds-p-around_medium lgc-bg" style="text-align: end;">                 <lightning-button label="Fire Event" variant="brand" onclick={handleClick}></lightning-button>             </div>            </div>     </lightning-card> </template>

lWCLMS.JS :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { LightningElement, wire } from 'lwc'; import TechdicerChannel from '@salesforce/messageChannel/TechdicerChannel__c'; import {publish, MessageContext} from 'lightning/messageService'   export default class LWCLMS extends LightningElement {     @wire(MessageContext)     messageContext;     message;       handleChange(event){         this.message = event.detail.value;     }       handleClick() {         let message = {message: this.message};         publish(this.messageContext, TechdicerChannel, message);     } }

subscriber.HTML : This is the Subscriber Component.

1 2 3 4 5 6 7

<template>     <lightning-card title="Lightning Message Service (LMS) in LWC Subscriber" icon-name="standard:contact">         <div class="slds-m-around_medium">             {publisherMessage}         </div>     </lightning-card> </template>

subscriber.JS :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

import { LightningElement, wire } from 'lwc'; import TechdicerChannel from '@salesforce/messageChannel/TechdicerChannel__c'; import { subscribe, MessageContext } from 'lightning/messageService'; import { ShowToastEvent } from 'lightning/platformShowToastEvent';   export default class Subscriber extends LightningElement {     publisherMessage = '';     subscription = null;       @wire(MessageContext)     messageContext;       connectedCallback() {         this.handleSubscribe();     }       handleSubscribe() {         if (this.subscription) {             return;         }         this.subscription = subscribe(this.messageContext, TechdicerChannel, (message) => {             console.log(message.message);             this.publisherMessage = message.message;             this.ShowToast('Success', message.message, 'success', 'dismissable');         });     }       ShowToast(title, message, variant, mode){         const evt = new ShowToastEvent({             title: title,             message:message,             variant: variant,             mode: mode         });         this.dispatchEvent(evt);     }       }