Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gauravxlokhande/lms-pub-sub-lightning-message-service

Lightning Message Service (LMS) in Lightning Web Components (LWC) is a feature provided by Salesforce that enables communication between Aura components, Lightning web components, Visualforce pages, and utility bars in the Salesforce ecosystem.
https://github.com/gauravxlokhande/lms-pub-sub-lightning-message-service

html javascript lightning-messaging-service lms lmsservice lwc lwc-component salesforce salesforce-developers salesforce-lightning salesforce-lightning-components

Last synced: about 1 month ago
JSON representation

Lightning Message Service (LMS) in Lightning Web Components (LWC) is a feature provided by Salesforce that enables communication between Aura components, Lightning web components, Visualforce pages, and utility bars in the Salesforce ecosystem.

Awesome Lists containing this project

README

        

# Pub-Sub LWC : Lightning Message Service.

![image](https://github.com/gauravxlokhande/LMS-Pub-Sub-Lightning-Message-Service/assets/119065314/90387f9b-bc95-46eb-a57d-73550e3b330b)

## Steps to use Pub-Sub:

## Step 1 : create a folder named "messageChannels" under the "force-app".
![image](https://github.com/gauravxlokhande/Pub-Sub_Lightning_Web_Components/assets/119065314/6cde8c4d-a218-44e1-8595-ceced5b7d549)

## Step 2 : create the file named "Counting_Update.messageChannel-meta.xml". // "Counting_Update" is a name of xml file.
![image](https://github.com/gauravxlokhande/Pub-Sub_Lightning_Web_Components/assets/119065314/dde18ec3-f5a4-455b-80ca-bd70ed89ea81)

- inside the xml file declear the messagefield inside it fieldname for the field. Like below:

```

CountingUpdated
true
This Lightning Message Channel sends information from VF to LWC


operator
This is the operator field for manipulation


constant
This is the number for manipulation

```

## Step 3: Create a publish component and import the publish and messagecontext , and the xml file that we create. like below:

```
import { publish, MessageContext } from "lightning/messageService";
import COUNTING_UPDATED_CHANNEL from '@salesforce/messageChannel/Counting_Update__c'; // xml file name import as __c
```

## Step 4: use it in js:

## publwc.html
```





```

## publwc.js
```
import { LightningElement, track, wire } from 'lwc';
import { publish, MessageContext } from "lightning/messageService";
import COUNTING_UPDATED_CHANNEL from '@salesforce/messageChannel/Counting_Update__c';

export default class PubLWC extends LightningElement {
@wire(MessageContext)
messageContext;

handleIncrement() {
const payload = {
operator: 'add',
constant: 1
};
publish(this.messageContext, COUNTING_UPDATED_CHANNEL, payload);
}

handleDecrement() {
const payload = {
operator: 'subtract',
constant: 1
};
publish(this.messageContext, COUNTING_UPDATED_CHANNEL, payload);
}

handleMultiply() {
const payload = {
operator: 'multiply',
constant: 2
};
publish(this.messageContext, COUNTING_UPDATED_CHANNEL, payload);
}

// Input field data publish
@track value;

HandleChange(event) {
this.value = event.target.value;

const payload = {
operator: 'name',
constant: this.value
}
publish(this.messageContext, COUNTING_UPDATED_CHANNEL, payload);
}
}

```

## Step 5: accept data in sublwc component

## sublwc.html
```



count:


Name: {name}


```

## sublwc.js
```
import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService'; // import sub and messagecontext
import COUNTING_UPDATED_CHANNEL from '@salesforce/messageChannel/Counting_Update__c'; // import message channel

export default class SubLWC extends LightningElement {
counter = 0;
subscription = null;

@wire(MessageContext)
messageContext;

connectedCallback() {
this.subscribeToMessageChannel();
}

subscribeToMessageChannel() {
this.subscription = subscribe(
this.messageContext,
COUNTING_UPDATED_CHANNEL,
(message) => this.handleMessage(message)
);
}

name;

handleMessage(message) {
if (message.operator === 'add') {
this.counter += message.constant;
} else if (message.operator === 'subtract') {
this.counter -= message.constant;
} else if (message.operator === 'multiply') {
this.counter *= message.constant;
}else if (message.operator ==='name') {
this.name = message.constant;
}
}
}

```

# _______________________________________________________________________