Custom Toast Component in Lightning

In Lightning we can show toast message to show message to users. But they are not supported everywhere. So today we will create our own custom Toast component. We have used SLDS toast here. So this component is supported on all UI, no matter if you are on LEX or in one.app

Here we have used lightning:notificationsLibrarycomponent component when ever standard method is supported else our custom UI will be displayed. Both UI looks same so end user won’t see any difference.

First we will create a component

customToast.cmp

<aura:component >
    <aura:attribute name="messageType" type="string" default="success"/>
    <aura:attribute name="message" type="string"/>
    <aura:attribute name="autoCloseTime" type="Integer" default="5000"/>
    <aura:attribute name="autoClose" type="Boolean" default="true"/>
    <aura:attribute name="autoCloseErrorWarning" type="Boolean" default="true"/>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    
    <aura:method name="showToastModel" action="{!c.showToast}" access="public">
        <aura:attribute name="message" type="String" access="public"/>
        <aura:attribute name="messageType" type="String" access="public"/>
    </aura:method>
    
    <div aura:id="toastModel" style="height: 4rem;" class="slds-hide">
        <div class="slds-notify_container slds-is-relative">
            <div class="{!'slds-notify slds-notify_toast slds-theme_'+v.messageType}" role="status">
                <span class="slds-assistive-text">{!v.messageType}</span>
              	<span class="{!'slds-icon_container slds-icon-utility-'+v.messageType+' slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top'}" title="{!v.message}">
                    <lightning:icon iconName="{!'utility:'+v.messageType}" size="small" variant="inverse" styleclass="slds-icon slds-icon_small"/>
                </span>
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small ">{!v.message}</h2>
                </div>
                <div class="slds-notify__close">
                    <button class="slds-button slds-button_icon slds-button_icon-inverse" title="Close" onclick="{!c.closeModel}">
                        <lightning:icon iconName="utility:close" size="small" variant="inverse"/>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</aura:component>

customToastController.js

({
    showToast : function(component, event, helper) {
                
        var params = event.getParam( 'arguments' );  
        try {
          component.find('notifLib').showToast({
                "variant": params.messageType,
                "message": params.message,
                "mode": "dismissable"
            });
        }
        catch(err) {
            component.set("v.message", params.message);
            component.set("v.messageType", params.messageType);
            
            $A.util.removeClass( component.find( 'toastModel' ), 'slds-hide' );
            $A.util.addClass( component.find( 'toastModel' ), 'slds-show' );
            
            var closeTime =  component.get("v.autoCloseTime");
            var autoClose =  component.get("v.autoClose");
            var autoCloseErrorWarning =  component.get("v.autoCloseErrorWarning");
            
            if(autoClose)
                if( (autoCloseErrorWarning && params.messageType != 'success') || params.messageType == 'success') {
                setTimeout(function(){ 
                    $A.util.addClass( component.find( 'toastModel' ), 'slds-hide' ); 
                    component.set("v.message", "");
                    component.set("v.messageType", "");
                }, closeTime);
            }
        }
       
	},
    
	closeModel : function(component, event, helper) {
		$A.util.addClass( component.find( 'toastModel' ), 'slds-hide' );
        component.set("v.messageType", "");
        component.set("v.messageType", "");
	}
})

And this is how our output will look like

This component have few attributes .

  • message: Show message to UI.
  • messageType: Severity type. Supported values are success, error and warning.
  • autoCloseTime: It is used to give auto close time. Default is 5 seconds.
  • autoClose : If you don’t want to auto close the component set it to false.
  • autoCloseErrorWarning: If you want to auto close the component but not in case of error, warning then set it to true. Once set to true user need to manually close it. So they can easily see the error.

To use this component just add this component and call the method

// add the component in markup
<c:customToast aura:id="toastCmp"/>

//and in controller call the method
component.find("toastCmp").showToastModel(message, messageType);

Do you want to add anything, let me know in comments. Happy programming 🙂

Advertisements

One thought on “Custom Toast Component in Lightning

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.