Toastr.js Comes to your Rescue!

Why do we need Custom Toast Messages?

Lightning Components are being used widely as a Lightning Quick Action for Salesforce1 users. Salesforce provides standard lightning toast messages event, which is used extensively for showing toast messages to the users for better interactivity and user experience. You can refer below showToast documentation for using the standard toast messages with your lightning components:

https://developer.salesforce.com/docs/component-library/bundle/force:showToast/documentation

However, there is an issue with the standard toast messages in Salesforce1 that the message popup goes behind the screen of Quick Action Component and as a result user will not see the toast messages. This happens to be appropriately handled when in Android, but in most of the iOS devices, the messages don’t appear. These messages play an essential role in the process since it helps in validating the user inputs and conveying users with significant responses against the input, they provide in the Lightning Components.

Upon checking this was found to be a known issue with Salesforce. You can read details of the problem over here:

https://success.salesforce.com/issues_view?id=a1p3A000000mCRqQAM&title=lightning-component-force-showtoast-displays-toast-message-behind-action-window-in-lightning-experience-and-salesforce1

Some related discussion with other people facing similar issues:

https://github.com/salesforce-ux/design-system/issues/39

What is the Solution?

Since there exists no direct workaround provided by Salesforce for this, we can handle this issue with custom Toast message library like toastr.js. This library offers the right amount of customization options as well as it appears on top of the screen consistently on every devices and Lightning component quick actions.

You can view documentation of this library over here:

https://github.com/CodeSeven/toastr

You can also view a demonstration of same toast messages over here:

https://codeseven.github.io/toastr/demo.html

How did we do it?
This library can be included in your lightning component as per below steps:

1. Include Library in the lightning component using ltng:require like below:

<ltng:require 
   styles = "{!$Resource.toastr + '/toastr.min.css'}"
   scripts =  "{!join(',', $Resource.toastr + '/jquery3.3.1.js',  $Resource.toastr + '/toastr.min.js')}"
   afterScriptsLoaded = "{!c.afterScriptsLoaded}" />
<aura:attribute name="toastrLoaded" type="boolean" default="false" />

2. Initiate the library in controller.js:

afterScriptsLoaded: function(component, event, helper){
            if(toastr != undefined){
                    toastr.options = {
                            "closeButton": false,
                            "debug": false,
                            "newestOnTop": true,
                            "progressBar": false,
                            "positionClass": "toast-top-center",
                            "preventDuplicates": true,
                            "onclick": null,
                            "showDuration": "300",
                            "hideDuration": "900",
                            "timeOut": "5000",
                            "extendedTimeOut": "1000",
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut"
                    };
                    component.set('v.toastrLoaded', true);
            }
    }

3. Based on the documentation from toastr.js library, include below generic method in your helper.js such that you can make reusable calls to custom toastr.js toast message:

toastMessage: function (component, type, title, message) {
         var toastEvent = $A.get("e.force:showToast");
    
         toastEvent.setParams({
                    "type": type,
                    "title": title,
                    "message": message
            });
    
           if(component.get('v.toastrLoaded')){
                    if(type=='error') {
                            //error call
                            toastr.error(message, title);
                    }
        
                    if(type=='success') {
                            //success message call 
                            toastr.success(message, title);
                    }
            } else {
        toastEvent.fire();
            } 
    }

4. How to utilize this method that we included in helper.js:
Make a call to the toastMessage method with type as ‘error’ to show an error toast message

Error Message:

helper.toastMessage(component, 'error', 'Oops!', 'Write your error message over here.');

Make a call to the toastMessage method with type as ‘success’ to show an error toast message.

Success Message:

helper.toastMessage(component, 'success','Success!', Write your success message of here');