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);
To display multiple line ToastMessages in Salesforce, you need to add line breaks to the message string. You can use the escape sequence "\n" to add a line break in the message. Here is an example :
To learn about customizing Toast Messages in Salesforce, visit at https://logcodes.com/toast-message-in-lwc/, This guide provides a comprehensive overview of toast messages in Lightning Web Components, along with step-by-step instructions on creating different toast messages.
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.
Hope this helps!
Prady01
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);
To display multiple line Toast Messages in Salesforce, you need to add line breaks to the message string. You can use the escape sequence "\n" to add a line break in the message. Here is an example : To learn about customizing Toast Messages in Salesforce, visit at https://logcodes.com/toast-message-in-lwc/, This guide provides a comprehensive overview of toast messages in Lightning Web Components, along with step-by-step instructions on creating different toast messages.