Custom toast on community site

How to Show a Custom Toast Message in Salesforce Community Using LWC

Toast messages are small notifications that appear briefly on the screen to show messages like errors or success after an action. In Salesforce Lightning Web Components (LWC), creating custom toast messages is helpful because it allows you to design them as you like, especially when working on a Community site (Experience Cloud). Let’s break down how to build a custom toast message step by step.

Why Build a Custom Toast Message?

1. More control: Salesforce has default toast messages, but a custom one allows you to design it exactly as you want.
2. Reusable: Once you create this custom toast component, you can use it anywhere on your Community pages.

Step 1: Creating the Custom Toast Component

We need two parts to build a custom toast:

• HTML (for the structure and look)
• JavaScript (for how it works)

CustomToast.html

This file defines the visual part of the toast notification. It checks if the toast message should show (showToastBar). If it’s true, the message appears with a specific icon, the message content, and a close button. Here’s what it looks like:

<template>
    <template if:true={showToastBar}>
        <div class="slds-notify_container">
            <div class={outerClass} role="status">
                <span class="slds-assistive-text">{type}</span>
                <span class={innerClass} title={message}>
                    <lightning-icon icon-name={getIconName} alternative-text="icon"
                        class="slds-icon slds-icon_small" variant="inverse" size="small"></lightning-icon>
                </span>
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small">{message}</h2>
                </div>
                <div class="slds-notify__close">
                    <lightning-button-icon icon-name="utility:close" size="small" variant="border-filled"
                        class="slds-button slds-button_icon slds-button_icon-inverse" alternative-text="close"
                        onclick={closeModel}></lightning-button-icon>
                </div>
            </div>
        </div>
    </template>
</template>

CustomToast.js

This file controls how the toast behaves. It shows or hides the toast, sets the message, and automatically closes the toast after a set amount of time (5 seconds by default).

import { LightningElement, api, track } from 'lwc';

export default class CustomToast extends LightningElement {
    @track type;
    @track message;
    @track showToastBar = false;
    @api autoCloseTime = 5000; // Close after 5 seconds by default

    @api
    showToast(type, message) {
        this.type = type;  // Error, Success, etc.
        this.message = message;  // The text to show
        this.showToastBar = true;  // Show the toast

        // Close the toast after the time is up
        setTimeout(() => {
            this.closeModel();
        }, this.autoCloseTime);
    }

    closeModel() {
        this.showToastBar = false;  // Hide the toast
        this.type = '';
        this.message = '';
    }

    get getIconName() {
        return 'utility:' + this.type;  // Icon based on message type
    }

    get innerClass() {
        return 'slds-icon_container slds-icon-utility-' + this.type;
    }

    get outerClass() {
        return 'slds-notify slds-notify_toast slds-theme_' + this.type;
    }
}

Step 2: Using the Toast Component

Now that we’ve built the toast component, you can use it in other places in your Community site.

Include the Toast in HTML

Add the custom toast component in your page like this:

<c-custom-toast auto-close-time="8000"></c-custom-toast>

This tells Salesforce to show the toast and automatically close it after 8 seconds.

Displaying the Toast in JavaScript

To show the toast when an action happens (like after form submission), you can call the showToast method from the component’s JavaScript like this:

For success messages:

this.template.querySelector('c-custom-toast').showToast('success', 'Action was successful!');

For error messages:

this.template.querySelector('c-custom-toast').showToast('error', 'Error: Something went wrong!');

Step 3: Styling the Toast

The design of the toast is based on the Salesforce Lightning Design System (SLDS). The type of message (error, success, etc.) will determine the icon and background color.

For example:

• Success messages will have a green background.
• Error messages will have a red background.

Conclusion

With this custom toast component, you have the flexibility to display toast notifications exactly how you want in your Salesforce Community. You can control how long they stay visible, what they look like, and easily reuse them anywhere in your Community site!