7

How can we achieve a new line in an LWC toast message? I tried using <br> and /n .. but it is not working. It's working in Aura, but not in LWC.

JS-

showSuccessToast() {
    var sMsg = 'Salesforce documentation is available in the app.<br/>';
    sMsg += 'Click ? in the upper-right corner.';
    const evt = new ShowToastEvent({
        title: 'Record Update',
        message: sMsg,
        variant: 'success',
        mode: 'sticky'
    });
    this.dispatchEvent(evt);
}

enter image description here

3

3 Answers 3

2

You should try \n instead of /n. That aside, it is documented that there are some limitations between the Aura and LWC versions; use Aura if you definitely need this today. You can use an Aura wrapper and dispatch an event from your LWC to Aura, then have Aura use the lightning:notificationsLibrary module to show your message from there.

3
  • 1
    \n i tried not working. Commented May 5, 2020 at 13:02
  • 1
    @hellraizer Like I said, there's not exactly feature parity between LWC and Aura. Consider using Aura instead.
    – sfdcfox
    Commented May 5, 2020 at 14:04
  • Can you un-accept this answer @hellraizer?
    – Andy Ray
    Commented Sep 18, 2020 at 23:15
2

I had the same issue and I've resolved it with putting '\n' in my text and also setting lightning-formatted-text tag that will show my text. Here is example how I've achieved it:

In JS:

let errMsg = 'Error Message: ' + error.body.message + '\n';
errMsg = errMsg + 'Stacktrace: ' +  error.body.stackTrace;

In HTML:

<lightning-formatted-text value={errorMessage} linkify ></lightning-formatted-text>
2
  • How is the tag showing the text without binding? Also how is it used in a toast?
    – Schnaps
    Commented Jun 8, 2022 at 9:05
  • 1
    This isn't for a toast message, but if you want to display a String with a line break in LWC, it works. In your js file, you have a variable: @track errorMessage In your js code, you can assign the value: this.errorMessage='Hello\nWorld' Use the lightning-formatted-text tag as shown above to display text with a line break. Commented Dec 31, 2022 at 0:50
-2

Use javascript backticks

 showToast() {
        const event = new ShowToastEvent({
            title: 'Get Help',
            message: `Salesforce documentation is available in the app.
 Click ? in the upper-right corner.`,
        });
        this.dispatchEvent(event);
    }
3
  • No luck.. still displaying in one line.. Commented May 5, 2020 at 13:21
  • Currently, it's not possible. Shall I create a custom component for you? Commented May 5, 2020 at 13:36
  • i have a custom component...i was wandering will it be possible in standard way..thank u nikhil.. Commented May 5, 2020 at 13:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .