2

I am dynamically creating a toast as shown below. This toast is created when response is received from server. I have created a component for toast and am dynamically creating it using $A.createComponent. The toast is getting fired when I am testing it in SF1 simulator or when I have added my component in app builder. However, it is not getting thrown on screen, thought it is generated as seen in console.log, in case when I test it using standalone app (adding parent component to .app file and then preview) OR when i render my component using ltng:out in a VF page. What may be the reason for this?

controller from where dynamically toast is created:

.
.
.
if (component.isValid() && state === "SUCCESS") {
            console.log("Values updated successfully!");
            //$A.get('e.force:refreshView').fire(); //this is also not working
            this.createToastComponent(component, 'success', 'Success!', 'Record Saved successfully!');

    createToastComponent : function(component, type, title, message){

    $A.createComponent(
        "c:ToastComponent",
        {
            "type" : type,
            "title" : title,
            "message": message
        },
        function(newToast, status, errorMessage){
            if(errorMessage === null){
                //do nothing
            }
            else{
                console.log('Toast errorMessage: '+ errorMessage);
            }
        }
    );
},

toastComponent UPDATED:

<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 class="slds-notify_container">
        <div aura:id="successToast" class="slds-notify slds-notify--toast slds-theme--success" role="alert">
            <span class="slds-assistive-text">Success</span>
            <button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close">
                <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">
                <div class="slds-col slds-align-middle">
                    <h2 class="slds-text-heading--small ">{!v.message}</h2>
                </div>
            </div>
        </div>
    </div>
</div>

toast component controller:

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

    var toastEvent = $A.get("e.force:showToast");
    console.log('toastEvent: '+ toastEvent+ 'title: '+ component.get("v.title")+ 'message: '+ component.get("v.message"));
    toastEvent.setParams({
        "title": component.get("v.title"),
        "message":  component.get("v.message"),
        "type": component.get("v.type")
    });
    toastEvent.fire();
}

})

Output in console.log: toastEvent: SecureAuraEvent: [object Object]{ key: {"namespace":"c"} }title: SUCCESS!message: Record created Successfully

1 Answer 1

5

The toast event is available only inside the lightning container and wont be available when you use lightning out on VF .

If you create a tab out of the component and if you are inside lightning experience ,you will be able to find toast event .

You will have to spin your own toaster for such scenario using ,

if(toastEvent){
   //fire the event
 }else{
  //Your own version of toast using SLDS
 }
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .