0

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

  • I've successfully implemented a toast in a utility bar component. It might be a typo or something in your code. Would you mind sharing what you've tried so far? Also, saying something "doesn't work" is not productive. Please describe how it doesn't work. – sfdcfox Mar 14 at 17:02
  • @sfdcfox - Updated my post. Thank you for your inputs. Let me know how else can i debug the toast not showing up – user2957592 Mar 14 at 18:43
  • Instead of doing this.showtoast, i just did console.log(this), and it shows undefined. Its obvious why this.showtoast throws error. But why is this=undefined? – user2957592 Mar 14 at 18:56
  • @sfdcfox I know i am pestering you a lot, but is there a way to close that toast via another event? I posted that question here - salesforce.stackexchange.com/questions/253949/how-to-hide-toast – user2957592 Mar 14 at 21:35
0

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();
    }
})
  • Fantastic. Thank you. Its working now (and i also found out i didnt define variable errorMsg). I will read more about "this" variable inside controller vs helper – user2957592 Mar 14 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.