I know it is possible to include a lightning web component into a VisualForce page. It's also possible to include multiple lightning web components into a VisualForce page. Though, I cannot find a way to fireEvent
and registerListener
so that I can pass data between 2 lightning web components included in my VisualForce page.
I've tried by importing the following
import { currentPageReference } from 'lightning/navigation';
But this is returning me an exception, that the currentPageReference should have an @wire{currentPageReference} pageRef
property. Which makes sense as we cannot access the lightning in VisualForce
I've also created my own pubsub module, which works ok when using in the lightning experience builder. So communication between the two components is working on lightning pages.
Any tips or hints on this topic?
Code to show what I have tried:
Fire event...
import { LightningElement, wire, api } from 'lwc';
import { CurrentPageReference } from "lightning/navigation";
import { registerListener, unregisterAllListeners, fireEvent } from "c/xxx_pubsub";
export default class xxx extends LightningElement {
@wire(CurrentPageReference) pageRef;
@api searchInput;
handleProductSearch(event) {
this.searchInput = event.target.value;
fireEvent(this.pageRef, "startSearch", this.searchInput);
}
}
Listener...
import { LightningElement, track, api, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { registerListener, unregisterAllListeners, fireEvent } from "c/xxx_pubsub";
connectedCallback() {
// Some method which is called
registerListener("startSearch", this.getSearchResult, this);
}
Thank you
Update on this topic
As Salesforce-sas suggested, I'm using the lightning messages service.
One component is using the following code.
import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import productsChannel from '@salesforce/messageChannel/SearchProductsChannel__c';
export default class xxx extends LightningElement {
@wire(MessageContext) messageContext;
handleProductSearch(event) {
// Read the data which we'll use and store in variable
payload = { searchInput: event.target.value };
// "Publish data in our channel"
publish(this.messageContext, productsChannel, payload);
}
}
The other component, which should receive the data is as follows:
import { LightningElement, track, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getSearchResult from '@salesforce/apex/xxx.getSearchProdDetails';
import { subscribe, unsubscribe, MessageContext, APPLICATION_SCOPE } from 'lightning/messageService';
import productsChannel from '@salesforce/messageChannel/SearchProductsChannel__c';
export default class xxx extends LightningElement {
searchInput;
filterCriteria = null;
@wire(MessageContext) messageContext;
@wire(getSearchResult, {searchInput: '$searchInput'}) searchResult ({error, data}) {
if (error) {
console.log(error);
} else if (data) {
console.log(data);
}
}
subscribeToChannel() {
console.log("here 2");
if (!this.filterCriteria) {
this.filterCriteria = subscribe(
this.messageContext,
productsChannel,
(message) => this.handleMessage(message),
{ scope: APPLICATION_SCOPE }
);
console.log(this.filterCriteria);
}
}
unsubscribeToChannel() {
unsubscribe(this.filterCriteria);
this.filterCriteria = null;
}
connectedCallback() {
console.log("here");
this.subscribeToChannel();
//this.getSearchResult('SearchString');
}
getSearchResult(searchInput){
console.log(searchInput);
if(searchInput !== undefined){
// Stringify the search input
let searchInput = JSON.stringify({
searchString: 'SearchString'
});
// Call the method
getSearchResult({searchInput:searchInput}).then(result => {
if (result && result['productList']) {
console.log(result);
}
});
}
}
disconnectedCallback() {
this.unsubscribeToChannel();
}
handleMessage(message) {
console.log('biep');
this.searchInput = message.searchInput;
}
}
Further help is really appreciated.
Currently when right before the lwc gets injected to the DOM, I see some calls are being triggered. Though I don't get inside the handleMessage method.
Also, when firing the event handleProductSearch
I don't see anything happening on the other component.
Thank you