force:showToast Message Display In Multiple Lines In Salesforce Lightning Component

Hello guys, today in this post i am going to share a workaround for salesforce lightning ‘force:showToast‘ event to display toast message in multiple lines.

In javaScript string we can use /n escape characters for insert a newline in string. so i have used /n in ‘force:showToast’ event message(string type) attribute, like following code in lightning component javaScript controller :

({
    showToast : function(component, event, helper) {
      // Use \n for line breake in string 
        var sMsg = 'Hello i am first statement \n';
        sMsg += 'Hello i am Second statement \n Hello i am Third statement';
        
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            mode: 'sticky',
            message: sMsg,
            type : 'success'
        });
        toastEvent.fire();
    }
})

but still getting no result. 🙁  [display in single line]

This event is handled by the one.app container. It’s supported in Lightning Experience, Salesforce app, and Lightning communities.

Solution/Workaround :

create a external CSS file with following code :

.toastMessage.forceActionsText{
     white-space : pre-line !important;
}

next upload this CSS file in static resource and reference in your lightning component using ltng:require tag.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
   <!--override Toast CSS with external [.CSS] file.--> 
    <ltng:require styles="{!$Resource.multilineToastCSS}" />
    
  <!--fire [force:showToast] lightning event on button click-->  
    <lightning:button variant="brand"
                      label="Display Toast"
                      onclick="{!c.showToast}"/>
</aura:component>

Check Also : Alternate/Workaround for contains() function in aura:if Condition in Lightning Component

JavaScript Controller :

({
    showToast : function(component, event, helper) {
      // Use \n for line breake in string 
        var sMsg = 'Hello i am first statement \n';
        sMsg += 'Hello i am Second statement \n Hello i am Third statement';
        
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            mode: 'sticky',
            message: sMsg,
            type : 'success'
        });
        toastEvent.fire();
    }
})

Happy Learning 🙂

Related Resource :

showToast Doc