Тост-сообщения в Lightning

Почему мы используем тосты? ……………………………………………………… Какие бывают тосты? ………………………………………………Где мы их используем?………………………………………………………….

Ответы на эти вопросы в этом блоге с примерами

Тосты используются для улучшения взаимодействия с пользователем путем отображения информации, предупреждений, сведений об успешном завершении и ошибке при нажатии кнопки или вводе данных формы. Когда проверка на стороне клиента выполнена, всплывающие уведомления помогают пользователю понять различные случаи, например, были ли данные формы успешно сохранены, есть ли в форме какие-либо ошибки, предупреждения, есть ли какая-либо информация, которую пользователь должен знать и т. д.

Тосты — это сообщения, которые отображаются под заголовком. Они используются для отображения различных сообщений, таких как успех, информация, ошибки и предупреждения, с помощью события, называемого force:showToast.

Кроме того, вместо предупреждающих сообщений используются тосты, которые могут улучшить внешний вид молнии.

ToastComponent.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <div class="slds-box slds-theme_default">
        <!-- Info Button, Color: Blue -->
        <lightning:button variant="brand" label="Info" title="Info" onclick="{! c.handleInfo }" />
        <!-- Delete Button, Color: Red -->
        <lightning:button variant="destructive" label="Delete" title="Delete" onclick="{! c.handleDelete }"/>
        <!-- Confirm Button, Color: Green -->
        <lightning:button variant="success" label="Confirm" title="Confirm" onclick="{! c.handleConfirm }"/>
        <!-- Warning Button, Color: White -->
        <lightning:button label="Warning" title="Warning" onclick="{! c.handleWarning }"/>
    </div>
</aura:component>

ToastController.js

({
    handleInfo : function (component, event, helper) {
        var mssg = "info";
        helper.showToastMessage(mssg, event);
    },
    handleDelete : function (component, event, helper) {
        var mssg = "error";
        helper.showToastMessage(mssg, event);
    },
    handleConfirm : function (component, event, helper) {
        var mssg = "success";
        helper.showToastMessage(mssg, event);
    },
    handleWarning : function (component, event, helper) {
        var mssg = "warning";
        helper.showToastMessage(mssg, event);
    }    
});

ToastHelper.js

({
    showToastMessage : function(mssg, event) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            mode: 'sticky',
            message: "You clicked: " +  event.getSource().get("v.label"),
            type : mssg
        });
        toastEvent.fire();
    }
})

Теперь посмотрим, как это работает………………………………………………………………………………………………

Вопросы: force:showToast — это событие, которое не работает напрямую в приложении Lightning и приложении LightningOut. Есть некоторые обходные пути для того же самого. Проверьте работу:

Рекомендации. Используйте соответствующий тип всплывающего уведомления в зависимости от сообщения, которое необходимо передать. Не использовать сбивающие с толку цвета, противоречащие смыслу сообщения. Сообщения должны быть краткими и должны передавать правильный смысл.

Дополнительные ресурсы: