Service Cloud Console – How to Show Pop-Up, Toast, or Banner in Lightning Service Cloud Console

We are using omni channel. Goal is to enhance the experience of an incoming call. We want some sort of toast to appear inside console when an agent receives incoming call.

So far this is what i have done. I built a backgroundutilityitem component –
Component –

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:backgroundUtilityItem" access="global" >
    <lightning:omniToolkitAPI aura:id="omniToolkit" />
    <aura:handler event="lightning:omniChannelWorkAssigned" action="{! c.onWorkAssigned }"/>
    <lightning:workspaceAPI aura:id="workspace" />
</aura:component>

Controller –

({
    onWorkAssigned : function(component, event, helper) {
        console.log("Work assigned.");
        var workItemId = event.getParam('workItemId');
        var workId = event.getParam('workId');
        console.log(workItemId);
        console.log(workId);
    }
})

After that, i went to lightning service cloud app, under "Utility Items" i added this component. It captures incoming call event (i can see workitemId in javascript console).

But now i want to show some sort of non-blocking pop-up or toast kind of thing when this event fires, which will display "Incoming call" or similar text. I am not sure how to do that.

I tried firing toast event, but it doesnt work (maybe because this component is a backgroundutilityitem.

—– Update to include code for toast (that throws error) —-
I modified controller to throw toast –

Controller with toast –

({
    onWorkAssigned : function(component, event, helper) {
        console.log("Work assigned.");
        var workItemId = event.getParam('workItemId');
        var workId = event.getParam('workId');
        console.log(workItemId);
        console.log(workId);
        this.showToast("success",errorMsg);
    },

    showToast : function(type, message){
        var toastEvent = $A.get('e.force:showToast');
        toastEvent.setParams(
            {
                "type": type,
                "message": message
            }
        );
        toastEvent.fire();
    }
})

But now as soon as event is fired (when a call via omni channel comes in), it throws big pop up error message –

[NoErrorObjectAvailable] [AlohaIntegration.js] Error thrown in handleAlohaMessage [[fireEvent] Error thrown while settings params to the event: runtime_service_omnichannel:eWorkAssigned [Action failed: c:Omnichannel_Background_Utility$controller$onWorkAssigned [Cannot read property 'showToast' of undefined]]]: new Aura.externalLibraries()

It happens because "this" is undefined (I dont know why), so this.showtoast throws the error

Best Answer

In a client-side controller, this is undefined. You should move the logic to your helper.

Controller

({
    onWorkAssigned : function(component, event, helper) {
        helper.onWorkAssigned(component, event);
    }
})

Helper

({
    onWorkAssigned : function(component, event) {
        console.log("Work assigned.");
        var workItemId = event.getParam('workItemId');
        var workId = event.getParam('workId');
        console.log(workItemId);
        console.log(workId);
        this.showToast("success",errorMsg);
    },

    showToast : function(type, message){
        var toastEvent = $A.get('e.force:showToast');
        toastEvent.setParams(
            {
                "type": type,
                "message": message
            }
        );
        toastEvent.fire();
    }
})
Related Topic