Platform Events Superbadge Unit Trailhead Challenge 3 | Subscribe to Asset Disconnection Events Modify the disconnectionNotice Lightning web component to subscribe to Asset Disconnection event messages and display a toast notification.

Requirement :
When a drone asset is disconnected (via a flow + Apex), a platform event called Asset_Disconnection__e is published. The disconnectionNotice LWC should:

Subscribe to this platform event channel

Use the event’s Asset_Identifier__c and Disconnected__c values

Show:

Success toast when Disconnected__c == true

Error toast when Disconnected__c == false

Based on the requirement to subscribe to the Asset_Disconnection__e Platform Event and show success or error toasts, here’s the updated disconnectionNotice.js file, completed with the correct logic for:

  • Setting channelName
  • Subscribing to platform events using empApi
  • Showing toasts based on Disconnected__c boolean

disconnectionNotice.js

import { LightningElement, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { subscribe, unsubscribe, onError, setDebugFlag, isEmpEnabled } from 'lightning/empApi';

export default class DisconnectionNotice extends LightningElement {
    subscription = {};
    channelName = '/event/Asset_Disconnection__e';
    status;
    identifier;

    connectedCallback() {
        this.handleSubscribe();
    }

    handleSubscribe() {
        const messageCallback = (response) => {
            const payload = response.data.payload;

            // Extract fields from the event payload
            const assetId = payload.Asset_Identifier__c;
            const isDisconnected = payload.Disconnected__c;

            this.identifier = assetId;
            this.status = isDisconnected;

            if (isDisconnected) {
                this.showSuccessToast(assetId);
            } else {
                this.showErrorToast();
            }
        };

        // Subscribe to the platform event channel
        subscribe(this.channelName, -1, messageCallback).then(response => {
            this.subscription = response;
            console.log('Successfully subscribed to channel ', response.channel);
        });

        // Optional: handle subscription errors
        onError(error => {
            console.error('EMP API error: ', error);
        });
    }

    disconnectedCallback() {
        // Unsubscribe from the channel when component is removed
        unsubscribe(this.subscription, response => {
            console.log('Unsubscribed from channel ', response.channel);
        });
    }

    showSuccessToast(assetId) {
        const event = new ShowToastEvent({
            title: 'Success',
            message: 'Asset Id ' + assetId + ' is now disconnected',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(event);
    }

    showErrorToast() {
        const event = new ShowToastEvent({
            title: 'Error',
            message: 'Asset was not disconnected. Try Again.',
            variant: 'error',
            mode: 'dismissable'
        });
        this.dispatchEvent(event);
    }
}

disconnectionNotice.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Final Steps to Complete the Challenge

  1. Deploy this component and place it on a Contact Record Page via the Lightning App Builder.
  1. Use the Disconnect All button to trigger asset disconnection (which publishes the Asset_Disconnection__e event).
  1. Confirm that:
    • A success toast appears if Disconnected__c = true
    • An error toast appears if Disconnected__c = false