How to show hyperlink in LWC toast
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 themessageData
attribute to pass inurl
andlabel
values for themessage
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();
}