Messages on the toast with multiple lines and links to records

Wanna navigate to the errored record in a custom component ?

Here we go !!!!

A toast will be displayed with success/error toasts based on the operations performed on the component.

In this blog, we would like to share the idea of displaying multi-line messages on the toast, along with the link to navigate to the record which caused the error.

The custom aura component gets a list of contacts belonging to an Account, hence it is hosted on the Account record page as below.

On clicking the button, toast will be displayed with a list of contacts associated with the action. On clicking the link, re-direction to the specific contact happens.

Here we go with the code for the same !!!

ToastRecords.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" controller="ToastMessageController">
    <!--This CSS below is used to show toast values in multiple lines-->
    <aura:html tag="style">
        .toastMessage.forceActionsText{
        white-space : pre-line !important;
        }
    </aura:html>
        <lightning:button label="Show List of Contact"  class="slds-size_1-of-1  slds-box slds-box_x-small slds-text-align_center" onclick="{! c.fetchContact }"/>
</aura:component>

Note : Normally messages will be displayed on a single line in toast. Above code will apply the style to display the messages on multiple lines.

ToastRecordsController.js

({
    fetchContact : function(component, event, helper) {
        component.set("v.showFilter", true);
        helper.fetchContactListToastMessage(component);
    }
})

ToastRecordsHelper.js

({  
    fetchContactListToastMessage: function (component) {
        
        var recordId = component.get("v.recordId");
        var action = component.get("c.fetchAccountContactsList");
        action.setParams({
            recordId: recordId
        });

        action.setCallback(this, function (response) {
            var state = response.getState();

            if (state === "SUCCESS")  {

                var contactRecordsonAccount = response.getReturnValue();
                
    if(contactRecordsonAccount.length > 0) {
                    var contacts = [];
                    var contactsToDisplay='';
                    var baseURL = window.location.origin;

                    for(var i = 0 ; i < contactRecordsonAccount.length; i++) {
                        var item = {
                            url:   baseURL+'/'+contactRecordsonAccount[i].Id,
                            label: contactRecordsonAccount[i].Name
                        };
                        contacts.push(item);
                        
                        contactsToDisplay += contactRecordsonAccount[i].Name+' : '+'{'+i+'}'+'\n';
                    }

                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                        title : 'Contacts related to this Account : ',
                        Message: 'Contacts related to this Account : ',
                        messageTemplate: contactsToDisplay,
                        type: 'Success',
                        messageTemplateData: contacts
                        
                    });
                    toastEvent.fire();
                }
                else
                {
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                        title : 'Contacts do not exist',
                        message: 'Contacts do not exist',
                        type: 'Error',
                    });
                    toastEvent.fire(); 
                }
            } 
            else if (state === "ERROR") 
            {
                var errors = response.getError();
                if (errors) {
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                        title : 'Error',
                        message: 'Error occurred while searching for the contacts’,
                        type: 'Error',
                    });
                    toastEvent.fire();
                }
            }
        });
        $A.enqueueAction(action);
    }
})