1

I am testing out Message Channel feature. I have a very simple code which is not working:

Component 1:

 <template>
     <lightning-card title="Publish Experiment" icon-name="utility:down">
     <div>
         <lightning-button label="publishTrue" onclick={publishTrue}></lightning-button>
         <lightning-button label="publishFalse" onclick={publishFalse}></lightning-button>
     </div>
     </lightning-card>
 </template>
 import { LightningElement, wire } from 'lwc';
 import { publish, MessageContext } from 'lightning/messageService';
 import SOME_MESSAGE from '@salesforce/messageChannel/testChannel__c';
 
 export default class MessageChannelPublish extends LightningElement {
     @wire(MessageContext) messageContext;
 
     publishTrue() {
         payload = { data: true};
         publish(this.messageContext, SOME_MESSAGE, payload);
     }
 
     publishFalse() {
         payload = {data: false};
         publish(this.messageContext, SOME_MESSAGE, payload);
     }
 }

Component 2:

 <template>
     <lightning-card title="Suscription Experiment">
     <template if:true={render}>
         <div>This is rendered on true</div>
     </template>
     <template if:false={render}>
         <div>This is rendered on false</div>
     </template>
     </lightning-card>
 </template>
 import { LightningElement, wire } from 'lwc';
 import { subscribe, MessageContext } from 'lightning/messageService';
 import SOME_MESSAGE from '@salesforce/messageChannel/testChannel__c';
 
 export default class MessageChannelSubscribe extends LightningElement {
     @wire(MessageContext) messageContext;
 
     subscription = null;
     render = false;
 
     connectedCallback() {
         this.subscription = subscribe(
             this.messageContext, SOME_MESSAGE,
             (payload) => {
                 this.handleUpdate(payload);
             }
         )};
     handleUpdate(payload){
         this.render = payload.data;
     }
 }

Message Channel definition:

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

Unfortunately I don't know how to debug this as my second component is not reacting to clicking of buttons in component 1. Would you please point out my error?

0

1 Answer 1

6

You didn't declare payload variable in your methods.

publishTrue() {
    payload = { data: true};
    publish(this.messageContext, SOME_MESSAGE, payload);
}

publishFalse() {
    payload = {data: false};
    publish(this.messageContext, SOME_MESSAGE, payload);
}

should be

publishTrue() {
    const payload = { data: true};
    publish(this.messageContext, SOME_MESSAGE, payload);
}

publishFalse() {
    const payload = {data: false};
    publish(this.messageContext, SOME_MESSAGE, payload);
}

Inside a javascript class, assigning variable values directly doesn't place them in global window object. You either have to keep them in class properties or just block scoped const/let.

1
  • 1
    Thanks a lot! Worked!
    – DevelBase2
    Mar 12, 2022 at 11:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .