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}
Best Answer
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.
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
andmessageTemplateData
.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:
Then, in your Lightning Aura Component, include the LWC:
And then in
handleShowToast()
, get the values and raise the toast message. (Note that, you will still need to keep themessage
attribute in the event)