1

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();
2
  • 1
    The error means that the toast mechanism isn't available in your current context. Perhaps you're using Lightning Out?
    – sfdcfox
    Jan 5, 2017 at 7:02
  • It’s supported in Lightning Experience and Salesforce1 only.try Run in lightinnig Experience It will work.
    – vignesh
    Jan 5, 2017 at 7:03

1 Answer 1

2

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

})

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.