Create lightning platform show toast event/dispatchEvent where display toast message with hyperlink click button and navigate to external link in Salesforce lightning web component LWC

[vijayk3327]

In this post we are going to learn about how to Create lightning platform show toast event/dispatchEvent where display toast message with hyperlink click button and navigate to external link in Salesforce lightning web component LWC

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcToastEvent.html

`

Show Toast Event and Navigate to RecordPage in Lightning Web Component (LWC)

  <div class="slds-grid slds-wrap">
      <div class="slds-col slds-size_6-of-12">
          <lightning-button variant="brand" label="Show Toast" onclick={showToast}></lightning-button>
        </div>
      <div class="slds-col slds-size_6-of-12">
        <lightning-button variant="brand" label="Navigate External Link" onclick={handleButtonClick}></lightning-button>
     </div>
  </div>
   
   <br/>

`

Step 2:- Create Lightning Web Component : lwcToastEvent.js

` import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class LwcToastEvent extends LightningElement {

showToast() {
    const event = new ShowToastEvent({
        title: 'Success',
        message:'Record created has been successfully',
            variant: 'success',
    });
    this.dispatchEvent(event);
}

  
    handleButtonClick() {
        const event = new ShowToastEvent({
            title: 'Success!',
            message: 'Record {0} created! See it {1}!',
            variant: 'success',
            messageData: [
                'w3web',
                {
                    url: 'https://www.w3web.net/',
                    label: 'Click Here',
                },
            ],
        });
        this.dispatchEvent(event);
    }

}`

Step 3:- Create Lightning Web Component : lwcToastEvent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>