# How to show hyperlink in LWC toast

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",
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: '',
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]) {
}
}
});
}

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

• 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 '19 at 16:58
• 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 '19 at 17:10

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.

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";
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 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,
{
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 '19 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 '19 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 '19 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 '19 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 '19 at 13:25

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

• 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 '20 at 2:43