14

I have created a LWC that executes a call to the controller and shows a toast message if the call fails:

 const event = new ShowToastEvent({
                    title: "Error",
                    message: "An error has occured. Return to record.",
                    variant: "error"
                  });
 this.dispatchEvent(event);

Return to record should be a hyperlink. Still, if I build the message to include the hyperlink, the string gets escaped and the hyperlink doesn't get properly displayed. I have checked the documentation and couldn't find a way to do that, even though in aura it was available.

Is there any way to achieve this? Or it's simply not supported yet?


Edit: I have managed to include a Return to Record link in the toast using Jayant's answers below. Here is the code that does that:

AuraContainer.cmp:

<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
    <c:sendemail onshowtoast="{!c.handleShowToast}"/>
</aura:component>

AuraContainer.js:

({
    handleShowToast : function(component, event, helper) {
        var message = event.getParam('message');
        var sObjectEvent = $A.get("e.force:navigateToSObject");
        var toastEvent = $A.get("e.force:showToast");

        toastEvent.setParams({
            title: message.title,
            mode: message.mode,
            type: message.variant,
            message: 'Sample Message', // you will need to keep this attribute, even though it's not used
            messageTemplate: '{0} {1}',
            messageTemplateData: [
                message.text,
                {
                    url: '',
                    label: 'Return to Org',
                    executionComponent: {
                        descriptor: "markup://force:navigateToSObject",
                                        attributes: {recordId: message.recordId, slideDevName:"detail"},
                                        isEvent: true,
                                        isClientSideCreatable: true,
                                        componentName: 'navigateToSObject'

                    }
                }
            ]
        });
        toastEvent.fire();
    }
})

SendEmail LWC:

import { LightningElement, api, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import checkOrgValidity from '@salesforce/apex/SendEmailController.checkOrgValidity'
import { ShowToastEvent } from 'lightning/platformShowToastEvent'

export default class SendEmail extends LightningElement {
    @api recordId;

    // Injects the page reference that describes the current page
    @wire(CurrentPageReference)
        currentPageReference;

    async connectedCallback() {
        this.recordId = this.currentPageReference.state.c__recordId;

        checkOrgValidity({sId: this.recordId})
                    .then(result => {
                        // processing in case of success                           
                    })
                    .catch(error => {
                        var errors = JSON.parse(error.body.message);
                        for(var i = 0; i < errors.length; i++) {
                            // make sure that the message is not empty
                            if(errors[i]) {
                                this.showToastWithHyperlink(errors[i], this.recordId, 'Warning', 'warning', 'sticky');
                            }
                        }
                    });
    }

    showToastWithHyperlink(msg, recordId, title, variant, mode) {
        let message = {};
        message.title = title;
        message.text = msg;
        message.recordId = recordId;
        message.mode = mode;
        message.variant = variant;

        const showToast = new CustomEvent('showtoast', {
            detail: { message },
        });

        this.dispatchEvent(showToast);
    }
}

The Lightning component gets opened using a Detail Page Button:

Behavior: Display in existing window with sidebar
Button or Link URL: /lightning/cmp/c__SendEmailContainer?c__recordId={!Account.Id}
2
  • 3
    It doesn't seem that you can use hyperlinks in a LWC Toast messages as of today at least. force:showToast used for Lightning Aura Components supported messageTemplate and messageTemplateData for this purpose, but it doesn't seem to have an impact with LWC, the docs doesn't mention this either.
    – Jayant Das
    Mar 11, 2019 at 16:58
  • 1
    I tried passing messageTemplate and messageTemplateData and it didnt work. You can work. You have to wrap inside an aura component and use pub - sub to child-to parent to fire event and aura parent will listen and fire showToast Mar 11, 2019 at 17:10

2 Answers 2

20

UPDATE [July 8, 2020]

LWC now supports showing hyperlinks in the toast message.

This seems to have been introduced in last couple of months as commented on the idea that I had created at the time of writing this answer first. The implementation details/example is documented, excerpt below.

Displaying Links in Toasts
To display a link in the message, use the messageData attribute to pass in url and label values for the message string.

const event = new ShowToastEvent({
    "title": "Success!",
    "message": "Record {0} created! See it {1}!",
    "messageData": [
        'Salesforce',
        {
            url: 'http://www.salesforce.com/',
            label: 'here'
        }
    ]
});

As of today, it doesn't seem you can use links in toast message in LWC directly. I have created this idea to allow the ability to show links in LWC toasts.

In Lighting Aura Components (LAC), the force:showToast had additional attributes for this purpose - messageTemplate and messageTemplateData.

But, these attributes are not available for the corresponding LWC lightning-platform-show-toast-event. Even if you try using it there, it does not have an impact.


Your option here is as Pranay mentioned in the comments, you can utilize a Custom Event in your LWC and then wrap your LWC in a LAC which handles the event and takes care of raising the toast message.

Here's a sample code how you can use it.

From LWC, raise a Custom Event:

showNotification() {
    let myData = [];
    myData[0] = "Title of Message";
    myData[1] = "This message is from LWC";
    myData[2] = "https://linktomyrecord.com";
    const showToast = new CustomEvent('showtoast', {
        detail: { myData },
    });

    this.dispatchEvent(showToast);
}

Then, in your Lightning Aura Component, include the LWC:

<c:lwcAuraComponent onshowtoast="{!c.handleShowToast}"/>

And then in handleShowToast(), get the values and raise the toast message. (Note that, you will still need to keep the message attribute in the event)

handleShowToast : function(component, event, helper) {
    var myData = event.getParam('myData');

    var title = myData[0];
    var msg = myData[1];
    var linkToRec = myData[2];
    
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        mode: 'pester', // or 'dismissible' -- see docs for details
        title: title,
        message: 'Sample Message', // you will need to keep this attribute
        messageTemplate: 'Record {0} created! See it {1}!',
        messageTemplateData: [
            msg, 
            {
                url: linkToRec, // here's your link
                label: 'here',
            }
        ]
    });
    toastEvent.fire();
} 
8
  • Thank you Jayant, that did the trick. Is there any way to also close the toast when navigating to the url? I'm navigating to a record detail page, but the toast is still visible on the screen.
    – Teodora
    Mar 12, 2019 at 9:02
  • @Teodora I have updated the answer to include mode which will help you to achieve this. For details as which one to use, you can refer to the docs.
    – Jayant Das
    Mar 12, 2019 at 13:59
  • I'm familiar with the "mode" attribute, actually I'm already using it in order to make sure that the toast sticks to the screen. This way the link remains accessible to the users. The problem is that when I click on the link and navigate to the record detail page the toast is still visible. Is there any way to avoid this?
    – Teodora
    Mar 13, 2019 at 12:24
  • I tried the modes I have mentioned and it does go away after sometime even when I navigate to a record detail.
    – Jayant Das
    Mar 13, 2019 at 12:44
  • I have edited the post to include all the details of my implementation. Since in your case it works properly, I would assume that there's only certain scenarios in which it doesn't work as expected.
    – Teodora
    Mar 13, 2019 at 13:25
1

we can use messageTemplate in LWC now, https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation

2
  • While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
    – identigral
    May 19, 2020 at 2:43
  • I can't find messageTemplate in that link - perhaps it's since been removed?
    – jbyrd
    Oct 29, 2021 at 19:46

You must log in to answer this question.

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