2020-11-25 Show Toast Event

在salesforce中，有OOB的toast action，通常我们有两种做法：可以参考下面的链接：https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation
Toast的样式有一下几种：

• Base

  
  image.png

• Success

  
  image.png

• Warning

  
  image.png

• Error

  
  image.png

• Error with Details

  
  image.png

具体写法如下：

   showErrorToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Error',
            message: 'Some unexpected error',
            variant: 'error',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showSuccessToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Success',
            message: 'Opearion sucessful',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showWarningToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Warning',
            message: 'Some problem',
            variant: 'warning',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showInfoToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Info',
            message: 'Operation will run in background',
            variant: 'info',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
}

但是不要忘了 Import Toast Message

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

还有一种需求是需要在Toast里面加入链接：主要是对messageData 的属性值赋值。但是也不要忘了 Import Navigation和Extend NavigationMixin。里面要考虑到占位符的使用。

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class LightningToastExample extends NavigationMixin(LightningElement) {
 handleButtonClick() {
        const event = new ShowToastEvent({
            "title": "Success!",
            "message": "Record {0} created! See it {1}!",
            "messageData": [
                'Salesforce',
                {
                    url: 'http://www.salesforce.com/',
                    label: 'here'
                }
            ]
        });
        this.dispatchEvent(event);
    }

    handleRecordClick() {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '003xx000000001eAAA',
                actionName: 'view',
            },
        }).then(url => {
            const event = new ShowToastEvent({
                "title": "Success!",
                "message": "Record {0} created! See it {1}!",
                "messageData": [
                    'Salesforce',
                    {
                        url,
                        label: 'here'
                    }
                ]
            });
            this.dispatchEvent(event);
        });

    }
}