Multi line toast message in Lightning Component.

Kapil May 12, 2020
Salesforce Bolt



In this article I will explain how to display a multi line toast message in Lightning Component. No you can not just do it using "\n" or "<br/>" tag, it's not going to work.
The solution is to create a custom CSS and use it in the component as shown below.

Component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <!--Add this CSS below in your component-->
    <aura:html tag="style">
        .toastMessage.forceActionsText{
        white-space : pre-line !important;
        }
    </aura:html>
    
    <lightning:button label="Click Me !" 
                      iconName="utility:animal_and_nature" 
                      iconPosition="left"  
                      variant="brand" 
                      onclick="{! c.clickMe }" />
</aura:component>


Controller
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
({
	clickMe : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Success',
            message: 'Hello !\nI am \nmulti line \ntoast. ',
            duration:' 5000',
            key: 'info_alt',
            type: 'success',
            mode: 'pester'
        });
        toastEvent.fire();
	}
})



If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 😊

Tags:

Post a Comment

0 Comments