Lightning Message Service (LMS) in LWC

by Rijwan Mohmmed
0 comment
lightning-message-service-(lms)-in-lwc-output

Hello friends, today we are going to discuss one of the best features of Lightning: 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.

Also, check this : Infinite/lazy loading In LWC Lightning Datatable

lightning-message-service-(lms)-in-lwc-output
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 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-service-(lms)-in-lwc-folder-creatation
lightning-message-services-(lms)-in-lwc-folder-creatation

TechdicerChannel.messageChannel-meta.xml :

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

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

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.

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

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);
    }
    
}

Output :

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

Reference :

  1. Lightning Message Service

You may also like

Leave a Comment