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 :

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

single-line toast

 

 

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 :

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

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

multiline-toast-lightning

 

Happy Learning 🙂

Related Resource :

showToast Doc

 

(Visited 21,663 times, 1 visits today)

13 thoughts on “force:showToast Message Display In Multiple Lines In Salesforce Lightning Component”

  1. Hi,

    I have a requirement. I have an account object and Custom Account object, a field called Segment in Account, If I fill this picklist field then the value will auto populate from Account to custom Account using a formula. now when I am creating a custom account field I need to show a validation error saying that field is not populated using lightning component and apex controller. please help me

    Reply
  2. Thank you man I needed changing some styles in the toast. And your article was spot on. But would you elaborate why it works with a static resource and not with just adding it to the component CSS

    Reply
    • Maybe, Lightning component’s CSS and Salesforce’s css (SLDS) loads before the external css file. And it overrides the previously loaded with latest one as it’s behaviour of any HTML.

      Reply
  3. Hi All,

    LWC! It works in Lightning Web Components, wanted to update anyone looking for confirmation.  Do the same steps with the external CSS file (this is how you override stuff in the shadow dom)

    This Works:

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

    Make sure you DO NOT namespace your CSS like this:

    c-my-custom-lwc .toastMessage.forceActionsText{
      white-space : pre-line !important;  THIS WILL NOT WORK
    }

    Then load your css like this:

    https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-resource-loader/documentation

    Then use \n in your message strings

    Reply

Leave a Comment