[SalesForce] Cannot read property ‘setParams’ of undefined error in Lightning Toast messages

I am using Lightning toast messages in my lightning controller.
But I am getting error like "Cannot read property 'setParams' of undefined"

Below is my code:

var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
   "title": "Error!",
    "message": "Plase provide 'Part Number' to add to the list."
});
toastEvent.fire();

Best Answer

If you want to use toast in ltng:out/VF page i.e out of one.app container, you need to implement your own toast component and call/create the component from parent component. You can refer following component I created:

markup:

<aura:component >
<aura:attribute name="type" type="String" />
<aura:attribute name="title" type="String" />
<aura:attribute name="message" type="String" />
<aura:handler name="init" action="{!c.handleInit}" value="{!this}" />

<div class="slds">
    <div aura:id="toastDiv" class="slds-notify_container">
        <div aura:id="typeDiv" class="slds-notify slds-notify--toast slds-theme--success" role="alert">
            <span class="slds-assistive-text">{!v.title}</span>
            <button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close" onclick="{!c.closeToast}">
                <c:SVGIcon svgPath="/resource/SLDS214/assets/icons/action-sprite/svg/symbols.svg#close"
                           class="slds-button__icon slds-button__icon--large" assistiveText="Close"/>
                <span class="slds-assistive-text">Close</span>
            </button>
            <div class="slds-notify__content slds-grid">
                <c:SVGIcon svgPath="/resource/SLDS214/assets/icons/utility-sprite/svg/symbols.svg#notification"
                           class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex"/>
                <div class="slds-col slds-align-middle">
                    <h2 class="slds-text-heading--small ">{!v.message}</h2>
                </div>
            </div>
        </div>
    </div>
</div>

Pass required parameters and set them in controller:

Controller:

({
handleInit : function(component, event, helper) {

    if(component.get('v.type') === 'success'){
        $A.util.addClass(component.find('typeDiv'), 'slds-theme--success');
    }
    else{
        $A.util.addClass(component.find('typeDiv'), 'slds-theme--error');
    }
    helper.addDelay(component, event, helper);
},

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

})

Helper:

({
addDelay : function(component, event, helper){
    window.setTimeout(
        $A.getCallback(function() {
            if(component.isValid()){
                var toastDiv= component.find('toastDiv');
                $A.util.removeClass(toastDiv, "slds-show");
                $A.util.addClass(toastDiv, "slds-hide");
            }
            else{
                console.log('Component is Invalid');
            }
        }), 3000
    );
},

closeToast : function(component){
    console.log('Inside closeToast after delay: '+ component);
    var toastDiv= component.find('toastDiv');
    $A.util.removeClass(toastDiv, "slds-show");
    $A.util.addClass(toastDiv, "slds-hide");
}

})

Related Topic