6

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}
  • 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 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 – Pranay Jaiswal Mar 11 at 17:10
3

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();
} 
  • 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 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 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 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 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 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.