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
Best Answer
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 ,