Show pop-up or 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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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();
    }
})

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0