Messages on the Toast with Multiple Lines and Links to Records

Wanna navigate to the errored record in a custom component? This guide shows how to display messages on the toast with multiple lines and links to records, making navigation and debugging easier.

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.

Messages on the toast with multiple lines and links to records

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.

Salesforce toast message with link and line breaks

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);
    }
})

We are Inno Valley Works, We are a passionate team of developers, best thinkers and consultants who can solve anything and everything.
With our highly engaging team, you can easily bring the vision to all your business ventures come true.
We have team, put your problem, get your solution

Drop us a message info@innovalleyworks.com , we will coordinate to implement the feature in your org.

🎥 Check Out Our YouTube Channel

Explore helpful tutorials, product updates, and feature walkthroughs from the team at Innovalley Works.

👉 Visit Our Channel

Messages on the toast with multiple lines and links to records