Displaying Toast Message from Modal in Lightning Components

With traditional Visualforce development we use apex:pageMessage to display custom messages to the User. And now with Lightning Components development we can use force:showToast to display custom messages!

Here we are going to display our Toast Messages from a Modal and expose it through a Lightning Component Tab.


Below we are going to create our custom Lightning Component and Lightning Component custom Tab.

LightningToastMsg.cmp: This is our component code
 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,force:hasRecordId" access="global">  
   <!--Load LDS from static resource-->  
   <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system.css"/>    
   <!--Define Modal-->  
   <div class="demo-only" style="height: 800px;">  
     <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">  
       <div class="slds-modal__container">  
         <!--Define Modal Header-->  
         <header class="slds-modal__header">  
           <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal with Toast Messages!</h2>  
         </header>  
         <!--Define Modal Footer-->  
         <footer class="slds-modal__footer">  
           <!--Define custom Buttons-->  
           <center><button class="slds-button slds-button_neutral" onclick="{! c.fireToastSuccess }" variant="brand" >Success Toast Message</button></center><br/>  
           <center><button class="slds-button slds-button_neutral" onclick="{! c.fireToastInfo }" variant="brand" >Info Toast Message</button></center><br/>  
           <center><button class="slds-button slds-button_neutral" onclick="{! c.fireToastWarning }" variant="brand" >Warning Toast Message</button></center><br/>  
           <center><button class="slds-button slds-button_neutral" onclick="{! c.fireToastError }" variant="brand" >Error Toast Message</button></center>   
         </footer>  
       </div>  
     </section>  
     <div class="slds-backdrop slds-backdrop_open"></div>  
   </div>  
 </aura:component>  

LightningToastMsgController.js: This is our .js component controller code
 ({  
   fireToastSuccess : function(component, event, helper) {  
     //alert('************TestingToast!************');  
     helper.fireToastSuccess();  
   },  
   fireToastInfo : function(component, event, helper) {  
     helper.fireToastInfo();  
   },  
   fireToastWarning : function(component, event, helper) {  
     helper.fireToastWarning();  
   },  
   fireToastError : function(component, event, helper) {  
     helper.fireToastError();  
   }    
 })  

LightningToastMsgHelper.js: Finally This is our .js component helper code
 ({  
   fireToastSuccess : function(component, event, helper) {  
     var toastEvent = $A.get("e.force:showToast");  
     toastEvent.setParams({  
       "title": "Success!",  
       "message": "Here is your Success Toast Message!",  
       "type": "success"  
     });  
     toastEvent.fire();  
   },  
   fireToastInfo : function(component, event, helper) {  
     var toastEvent = $A.get("e.force:showToast");  
     toastEvent.setParams({  
       "title": "Success!",  
       "message": "Here is your Informational Toast Message!",  
       "type": "INFORMATIONAL"  
     });  
     toastEvent.fire();  
   },  
   fireToastWarning : function(component, event, helper) {  
     var toastEvent = $A.get("e.force:showToast");  
     toastEvent.setParams({  
       "title": "Success!",  
       "message": "Here is your Warning Toast Message!",  
       "type": "WARNING"  
     });  
     toastEvent.fire();  
   },  
   fireToastError : function(component, event, helper) {  
     var toastEvent = $A.get("e.force:showToast");  
     toastEvent.setParams({  
       "title": "Success!",  
       "message": "Here is your Error Toast Message!",  
       "type": "ERROR"  
     });  
     toastEvent.fire();  
   }  
 })  

Lets walk through above code blocks:
1. In our LightningToastMsg.cmp code, we have defined our Modal with a header and footer sections and under footer we have our buttons to display all four types (Success, Informational, Warning, Error) of toast messages
2. In our LightningToastMsgController.js code, we have specific methods to call for each button that we have defined in our component markup
3. Finally in our LightningToastMsgHelper.js code, which is our helper method that has specific methods to where we are displaying our toast messages from. Here we are using force:showToast to display the toast message.
Once all the above is ready, we can go ahead and create our lightning component custom tab and add it to the app to display our component from the ui

Lightning Component custom Tab:










Below is how we should be able to view custom toast messages for each button click from our Modal which is accessible from custom tab















Thank you!

Comments

Popular posts from this blog

Lightning Component to display dynamic sObject data

Lightning RecordForm - An enhanced Lightning Data Service