Subscribing to events

Floorplan is using the Lightning Message Service for some of its events. This means you could subscribe to two message channels that receive messages on the firing of a specific event.

The areaSelectedChannel publishes messages when an area is selected, and passes the selectedAreaId property;
The dateTimeSelectedChannel publishes messages when a datetime is selected, and passes the selectedDateTime property.

Sample code that listens to the areaSelected event:

import { LightningElement, wire } from 'lwc';
import {
    subscribe,
    unsubscribe,
    APPLICATION_SCOPE,
    MessageContext,
} from 'lightning/messageService';
import areaSelectedChannel from '@salesforce/messageChannel/FP25__Area_Selected__c';

export default class Floorplan extends LightningElement {
    subscription = null;
    selectedAreaId;
    areaSubscription;

    @wire(MessageContext)
    messageContext;
    
    // Encapsulate logic for Lightning message service subscribe and unsubsubscribe
    subscribeToMessageChannel() {
        if (!this.subscription) {
            this.subscription = subscribe(
                this.messageContext,
                areaSelectedChannel,
                (message) => this.handleMessage(message),
                { scope: APPLICATION_SCOPE }
            );
        }
    }
  
    unsubscribeToMessageChannel() {
        unsubscribe(this.subscription);
        this.subscription = null;
    }

    // Handler for message received by component
    handleMessage(message) {
        this.selectedAreaId = message.selectedAreaId;
    }

    // Standard lifecycle hooks used to subscribe and unsubsubscribe to the message channel
    connectedCallback() {
        this.subscribeToMessageChannel();
    }

    disconnectedCallback() {
        this.unsubscribeToMessageChannel();
    }
}

GoMeddo Floorplan

Subscribing to events

Analytics

Related content