При разработке Salesforce с использованием веб-компонентов Lightning (LWC) отображение всплывающих сообщений является обычной практикой для предоставления обратной связи пользователю после выполнения таких действий, как вставка данных. Тост-сообщения — это небольшие всплывающие уведомления, которые ненадолго появляются на экране и передают пользователю важную информацию. В этой статье мы рассмотрим несколько методов реализации всплывающих сообщений в LWC при вставке данных. Итак, хватайте чашечку кофе и приступайте!

Метод 1: использование службы сообщений Lightning
Служба сообщений Lightning — это мощная функция в LWC, которая позволяет различным компонентам взаимодействовать друг с другом. Чтобы отобразить всплывающее сообщение при вставке данных, вы можете использовать эту службу для публикации сообщения от компонента, ответственного за вставку данных, и подписаться на него в компоненте, где вы хотите отображать всплывающее сообщение. Вот пример:

// Component responsible for data insertion
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { publish, MessageContext } from 'lightning/messageService';
import INSERT_SUCCESS_CHANNEL from '@salesforce/messageChannel/InsertSuccess__c';
export default class InsertDataComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;
    handleInsert() {
        // Perform data insertion logic here
        const toastEvent = new ShowToastEvent({
            title: 'Success',
            message: 'Data inserted successfully!',
            variant: 'success'
        });
        dispatchEvent(
            publish(this.messageContext, INSERT_SUCCESS_CHANNEL, {
                message: 'Data inserted successfully!'
            })
        );
    }
}
// Component to display toast message
import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import INSERT_SUCCESS_CHANNEL from '@salesforce/messageChannel/InsertSuccess__c';
export default class DisplayToastComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;
    connectedCallback() {
        this.subscription = subscribe(
            this.messageContext,
            INSERT_SUCCESS_CHANNEL,
            (message) => {
                this.showToast(message.message);
            }
        );
    }
    showToast(message) {
        // Display toast message logic here
    }
}

Метод 2. Использование компонента службы Lightning
Компонент службы Lightning предоставляет декларативный способ отображения всплывающих сообщений в LWC. Вы можете использовать сервисный компонент lightning__showToastдля отображения всплывающего сообщения при успешной вставке данных. Вот пример:

<template>
    <lightning-button label="Insert Data" onclick={handleInsert}></lightning-button>
    <lightning-show-toast-event name="successToast" variant="success" title="Success" message="Data inserted successfully!" ></lightning-show-toast-event>
</template>
import { LightningElement } from 'lwc';
export default class InsertDataComponent extends LightningElement {
    handleInsert() {
        // Perform data insertion logic here
        this.dispatchEvent(new CustomEvent('successToast'));
    }
}

Метод 3. Использование пользовательских компонентов всплывающего уведомления.
Если вы предпочитаете более индивидуальный подход, вы можете создать свой собственный компонент всплывающего уведомления. Это дает вам полный контроль над внешним видом и поведением всплывающего сообщения. Вот упрощенный пример:

<!-- toastMessage.html -->
<template>
    <div class={toastClass}>
        <p>{message}</p>
    </div>
</template>
<!-- toastMessage.js -->
import { LightningElement, api } from 'lwc';
export default class ToastMessage extends LightningElement {
    @api message;
    @api toastClass;
    connectedCallback() {
        setTimeout(() => {
            this.dispatchEvent(new CustomEvent('close'));
        }, 5000);
    }
}

// Component responsible for data insertion
import { LightningElement } from 'lwc';
export default class InsertDataComponent extends LightningElement {
    handleInsert() {
        // Perform data insertion logic here
        this.showToast('Data inserted successfully!', 'success');
    }
    showToast(message, variant) {
        const toast = document.createElement('c-toast-message');
        toast.message = message;
        toast.toastClass = `toast ${variant}`;
        toast.addEventListener('close', () => {
            document.body.removeChild(toast);
        });
        document.body.appendChild(toast);
    }
}

В этой статье мы рассмотрели три различных метода реализации всплывающих сообщений в веб-компонентах Lightning (LWC) при вставке данных. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям, будь то использование службы сообщений Lightning для взаимодействия компонентов, компонента службы Lightning для декларативных всплывающих сообщений или создание пользовательского компонента всплывающих уведомлений для полной настройки. Используя эти методы, вы можете улучшить взаимодействие с пользователем и обеспечить обратную связь в режиме реального времени во время вставки данных в ваши приложения LWC.

Помните, что всплывающие сообщения – это отличный способ держать пользователей в курсе событий и поддерживать их заинтересованность. Итак, приступайте к реализации этих методов в своих проектах LWC, чтобы поднять пользовательский опыт на новый уровень. Ура!