How can we use publish-subscriber event pattern in Community Cloud using lightining web component.
I have drag-and-drop two Lightining Web Component(LWC) in a community page. On click on first component I have to show some output in second component.
Same components are working in Lightning Page(Like: Account detail page) but not in Community page.
I used pubsub module from the lwc-receipe for this.
Code which fires the Event:
import { LightningElement, api, wire } from 'lwc';
import {CurrentPageReference} from 'lightning/navigation';
import { fireEvent } from 'c/pubsub'
export default class LwcAccounttile extends LightningElement {
@api name;
@wire(CurrentPageReference) pageRef;
tileClick() {
fireEvent(this.pageRef, 'inputChangeEvent', this.name);
}
}
Code which subscribe the events
import { LightningElement,track,api,wire } from 'lwc';
import { CurrentPageReference} from 'lightning/navigation';
import { registerListener, unregisterAllListeners, fireEvent } from 'c/pubsub';
export default class Lwc_AccountEventListner extends LightningElement {
@track ac;
@track inpVal;
@wire(CurrentPageReference) pageRef;
connectedCallback() {
// subscribe to inputChangeEvent event
registerListener('inputChangeEvent', this.handleChange, this);
}
disconnectedCallback() {
// unsubscribe from inputChangeEvent event
unregisterAllListeners(this);
}
handleChange(inpVal) {
this.inpVal = inpVal;
}
}
During debugging I found that this.pageRef is returning undefined in the commnunity while in lightning page it is returning value.
Best Answer
The pub-sub module checks for page references when firing events, so that the event is scoped and only in the current page.
In Communities, we do support lightning-navigation as of Spring '19: http://releasenotes.docs.salesforce.com/en-us/spring19/release-notes/rn_networks_navigationchanges.htm
However, there are some limitations, currently CurrentPageReference in LWC is not supported like:
@wire(CurrentPageReference)currentPageReference;
, which is why you are getting undefined page references. We are currently working on supporting it, so it should be out soon!For a temporary solution, you can just remove all the pageRef checking in pubsub :). Here's a quick example: https://gist.github.com/kmesic/262887799fb70be94707cb0b87936e7b
Also, we are soon going to be releasing a LWC sample that will work in Communities by default! This should help clear up any confusion when using LWC in Communities.