Multiline toast message

Question

I want to be able to make a toast message have two lines of information:

When I look in the documentation, I don't see anything that specifies how to add details to the message, the way we see toast on LightningDesignSystem.com.

Is there a parameter that gets passed into toastEvent.setParams?

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "title": "Success!",
        "message": "The record has been updated successfully."
    });
    toastEvent.fire();
}

Answer 1

The title is the first line of information, the message is the second line. Note how the second line is smaller than the first.

Answer 2

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);