Code Example of Listening to LMS Events

A sample component that can be added to a page for testing the LMS messages

import { LightningElement, wire, track } from "lwc";
import { publish, subscribe, MessageContext } from "lightning/messageService";
import CANVAS_INTERACTION_CHANNEL from "@salesforce/messageChannel/RDraw__Canvas_Interaction__c";
import CANVAS_INITIALIZED_CHANNEL from "@salesforce/messageChannel/RDraw__Canvas_Initialized__c";
import CANVAS_ELEMENTSELECTED_CHANNEL from "@salesforce/messageChannel/RDraw__Canvas_ElementSelected__c";
import CANVAS_ELEMENT_HOVERED_CHANNEL from "@salesforce/messageChannel/RDraw__Canvas_ElementHovered__c";

export default class Test_LMS extends LightningElement {
	@track receivedMessage = {};

	@wire(MessageContext) messageContext;
	subscription = null;

	@track renderContextId;
	@track sceneSettings;
	// Variables to store the input values
	title = "";
	mode = "";
	message = "";
	messageTemplate = "";
	iconName = "";
	type = "";
	duration = 0;
	messageTemplateData = "";
	eventName = "";
	connectedCallback() {
		this.subscribeToCanvasInitializedChannel();
		this.subscribeToElementClickedMessageChannel();
		this.subscribeToElementHoveredMessageChannel();
	}
	subscribeToElementClickedMessageChannel() {
		subscribe(this.messageContext, CANVAS_ELEMENTSELECTED_CHANNEL, (message) => {
			this.handleElementMessage(message, "Element Clicked");
		});
	}
	subscribeToElementHoveredMessageChannel() {
		subscribe(this.messageContext, CANVAS_ELEMENT_HOVERED_CHANNEL, (message) => {
			this.handleElementMessage(message, "Element Hovered");
		});
	}
	handleElementMessage(message, messageType) {
		let param = { ...message };
		if (param.recordId) {
			param.recordId = JSON.stringify({ ...param.recordId }, null, 2);
		}
		this.receivedMessage = param;
		this.eventName = messageType;
	}
	subscribeToCanvasInitializedChannel() {
		if (!this.subscription) {
			this.subscription = subscribe(this.messageContext, CANVAS_INITIALIZED_CHANNEL, (message) => this.handleCanvasInitializedMessage(message));
		}
	}
	handleCanvasInitializedMessage(message) {
		this.renderContextId = message.renderContextId;
		this.sceneSettings = message.sceneSettings;
	}

	// Event handlers to capture the input values
	handleTitleChange(event) {
		this.title = event.target.value;
	}
	handleModeChange(event) {
		this.mode = event.target.value;
	}
	handleMessageChange(event) {
		this.message = event.target.value;
	}
	handleMessageTemplateChange(event) {
		this.messageTemplate = event.target.value;
	}
	handleIconNameChange(event) {
		this.iconName = event.target.value;
	}
	handleTypeChange(event) {
		this.type = event.target.value;
	}
	handleDurationChange(event) {
		this.duration = event.target.value;
	}
	handleMessageTemplateDataChange(event) {
		this.messageTemplateData = event.target.value;
	}

	publishShowToastNotificationMessage() {
		const payload = {
			contextId: this.renderContextId,
			name: "showToastNotification",
			parameters: {
				title: this.title,
				mode: this.mode,
				message: this.message,
				messageTemplate: this.messageTemplate,
				iconName: this.iconName,
				type: this.type,
				duration: this.duration,
				messageTemplateData: this.messageTemplateData
			}
		};

		publish(this.messageContext, CANVAS_INTERACTION_CHANNEL, payload);
	}
}

Last updated