Lightning toast is not working

Question

I know by title it feels not acceptable but hear me out. I have registered below event in my cmp file

<aura:registerEvent name="showToast" type="force:showToast" />

and an helper method as

showToast : function(component, title, message, type) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": title,
            "message": message, 
            "type": type,
            "mode": "sticky",
            "duration": "50000"
        });
        toastEvent.fire();
    }, 

and i am calling this method on success callback of xyz functionality as

helper.showToast("",'SUCCESS', 'The Document has been Removed', "success");

but I see nothing on the page. It's a lightning page only.

I have even tried to give more duration so that I can inspect if it is there in the DOM or not but no I can not see.

I have checked SLDS.css, it's loading properly, I have event kept toast css classes in concerned component style also but to no avail.

Could you please provide some more directions on how to debug this to resolution.

Thanks, Akash

Answer 1

You are view the lightning page from preview? if yes, the toast is not working because the event is handled by one.app.

Quoting from documentation:

This event is handled by the one.app container. It’s supported in Lightning Experience, Salesforce1, and Lightning communities.

You can create your own toast component if you want to preview the page, or simply create a tab for the lightning page.

Check documentation for more details: force:showToast

Answer 2

You can use lightning:notificationsLibrary. In your aura component, add:

<lightning:notificationsLibrary aura:id="notifLib"/>

And change your helper method to:

showToast : function(component, title, message, type) {
        component.find('notifLib').showToast({
            "title": title,
            "message": message,
            "variant": type,
            "mode": "sticky"
        });
    },