How to show error messages in lightning aura component

Question

We have used ui:message tag to display error messages in lightning component. Lightning Ui namespace is deprecating soon hence we are migrating Ui namespace tags to the lightning namespace. Do we have any other alternate tag to display error messages in the component with close option. We need display around 32 error messages in the component.

<ui:message title="Error" severity="error" closable="true"> This is an error message. </ui:message>

Thanks, Anil Kumar

Answer 1

You want to use the Lightning Notifications Library. This has the capability to show toasts or notifications.

You can reference the documentation and examples here

Here is a basic example shown from documenation:

<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
</aura:component>


({
    handleShowNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    }
})

And here is how you can show a toast

<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>
</aura:component>

({
    handleShowToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "title": "Success!",
            "message": "The record has been updated successfully."
        });
    }
})

With the notification library, you have a much more robust system in place to show various messages to your user as it has tons of flexibility and options.

Answer 2

You can use toast messages. Set them to sticky to retain them until user closes it- https://developer.salesforce.com/docs/component-library/bundle/force:showToast/documentation

It supports all the states- Success, Warning, Info, Error

Consider building your own Message component with the slds blueprint. If there's more complexity involved - https://www.lightningdesignsystem.com/components/toast/