Lightning Web Components: Use of Streaming API in LWC

During a proof of concept, had faced a situation where business requirement was to show some business evaluation data in Utility Bar on the basis of inserted/updated Lead record. I tried with few available options, however got no luck as Utility Bar doesn't handle lightning Events and LWC Pubsub model.

After understanding the Utility API, found Utility bar is not a part of current opened lightning application. It treated as a separate application entity. To pass information to Utility Bar, Streaming API is the option that can be efficiently applied. However as we know Streaming API works on channel subscription. Push topics are required to create with the name, that further used as a channel in subscription method of Streaming API.

Since Utility API feature is still not available in LWC components, am wrapping it in Aura component. Just to demonstrate the use of Streaming API in LWC, I have used it. In any other case I would have preferred Aura only to fulfill the requirement.

Note: Avoid using Utility API in aura init method.

I have coded a sample of the whole requirement:

Component Bundles:

1. CustomUtilityAura (Base Component)
2. CustomUtilityBar (LWC Component)
3. Push Topic code (Anonymous Run )

** components are created as a part of proof of concept. it can be modified and optimized as per requirement.**

Refrences:

https://developer.salesforce.com/docs/atlas.en-us.api_streaming.meta/api_streaming/

https://developer.salesforce.com/docs/component-library/bundle/lightning:utilityBarAPI

Snippet:

Code:

customUtilityAura.cmp:

<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
        <lightning:utilityBarAPI aura:id="utilitybar" />
        <lightning:card>
                <c:customUtilityBar onopenutilitybar="{!c.openUtilityBar}"></c:customUtilityBar>
        </lightning:card>
</aura:component>

-------------------------------------------------------------------------------------------------------------------------

customUtilityAuraController.js

({
    openUtilityBar : function(component, event, helper){
           var utilityAPI = component.find("utilitybar");
            utilityAPI.openUtility();
            utilityAPI.getEnclosingUtilityId().then(function(response) {
              utilityAPI.setUtilityLabel({label : "LWC Sessions", utilityId : response});
              utilityAPI.setUtilityIcon({icon : "insert_tag_field", utilityId : response });
          }); 
    }
})

-------------------------------------------------------------------------------------------------------------------------

customUtilityBar.html

<template>

    <p>Lead Name: {leadName}</p>

    <p>Lead Status: {leadStatus}</p>

</template>

-------------------------------------------------------------------------------------------------------------------------

customUtilityBar.js

import { LightningElement, track, api } from 'lwc';
import { subscribe, unsubscribe, onError, setDebugFlag, isEmpEnabled } from 'lightning/empApi';

export default class CustomUtilityBar extends LightningElement {
    lead= [];
    @track leadName;
    @track leadStatus;
    channel = '/topic/LeadNotifications';
    @api
    connectedCallback(){
        let myComponent = this; // strange that sometimes 'this' behaves weirdly in connectedcallback.
        const messageCallback =function(response){
            myComponent.lead = response.data.sobject;
            myComponent.leadName= myComponent.lead.Name;
            myComponent.leadStatus = myComponent.lead.Status;
            const dispatchLeads = new CustomEvent('openutilitybar');
            myComponent.dispatchEvent(dispatchLeads);
        };

        subscribe(this.channel,-1,messageCallback).then(response =>{
            
            console.log('Subscribed to channel ', response.channel);
        });
    }
}

-------------------------------------------------------------------------------------------------------------------------

PushTopic (Anonymous Run):

PushTopic pushTopic = new PushTopic(); 

pushTopic.Name = 'LeadNotifications'; 

pushTopic.NotifyForOperationCreate = true;

pushTopic.NotifyForOperationUpdate = true;

pushTopic.NotifyForFields = 'Referenced';

pushTopic.ApiVersion= 48.0;

pushtopic.Query = 'Select Id, Name, Status From Lead WHERE Status = \'Open\''; 

insert pushTopic;