Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Veni KorapatyVeni Korapaty 

lightning web component Toast SLDS Change

How to display multiple line toast messages? 
AbhishekAbhishek (Salesforce Developers) 
Hi Venki,

The below blog might answer your query,

https://salesforce.stackexchange.com/questions/195129/show-lightning-toast-message-in-multiple-lines

https://salesforce.stackexchange.com/questions/278366/how-to-show-toast-message-in-multiple-lines-in-a-lightning-web-component

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks.
 
Caleb Kuester 27Caleb Kuester 27
I think you should be able to add new-line characters to the text.
Prady01Prady01
Hi there, You can use message template in the toat.

Hope this helps!
Prady01
karan sharma 61karan sharma 61
For Multiple Lines Toast in LWC 

we have to override CSS :

1) Create a CSS file and add in static resource

File Content :

.toastMessage{
    white-space: break-spaces !important;
}

2) Import That static resource file in your component

import { loadStyle } from 'lightning/platformResourceLoader';
import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}'

a) Define variable like : isCssLoaded = false;

3) Call it in reRenderCallback

renderedCallback(){
    if(this.isCssLoaded) return
    this.isCssLoaded = true;
    loadStyle(this,CUSTOMCSS).then(()=>{
        console.log('loaded');
    })
    .catch(error=>{
        console.log('error to load');
    });For Multiple Lines Toast in LWC 

we have to override CSS :

1) Create a CSS file and add in static resource

File Content :

.toastMessage{

    white-space: break-spaces !important;
}

2) Import That static resource file in your component

import { loadStyle } from 'lightning/platformResourceLoader';

import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';

a) Define variable like : isCssLoaded = false;

3) Call it in reRenderCallback

renderedCallback(){

    if(this.isCssLoaded) return
    this.isCssLoaded = true;
    loadStyle(this,CUSTOMCSS).then(()=>{
        console.log('loaded');
    })
    .catch(error=>{
        console.log('error to load');
    });

}

4)Create your toast message like this

var msg = 'This is first-line \nThis is Second Line. \nThis is third Line.';

const evt = new ShowToastEvent({

                title: "Complete Required Fields :",
                message: msg,
                variant: "error",
            });
            this.dispatchEvent(evt);
}

4)Create your toast message like this
var msg = 'This is first line \nThis is Second Line. \nThis is third Line.';
const evt = new ShowToastEvent({
                title: "Complete Required Fields :",
                message: msg,
                variant: "error",
            });
            this.dispatchEvent(evt);
Guilherme Lupi e SilvaGuilherme Lupi e Silva
That work very well for me! Thanks Bro