CREATE CUSTOM
NOTIFICATIONS IN
LWC
@TrailheadIQ
What are Notifications in LWC?
Notifications in Salesforce LWC allow you to display
important information or alerts in a non-intrusive
manner. These can be used for:
Event reminders
Error messages
Success or informational alerts
💡 Key Features:
Display messages with icons and custom text.
Provide a close button to dismiss notifications.
Auto-close functionality for better user experience.
@TrailheadIQ
Why Use Notifications in LWC?
🎯 Benefits:
Instant Feedback: Provide users with immediate
responses (success, error, etc.).
Improved UX: Notifications can highlight important
actions or reminders.
Non-Intrusive: Notifications don’t disrupt the user’s
workflow.
Customizable: Easily adapt the content, style, and
behavior of notifications.
@TrailheadIQ
Use Case for This Example
📌 What We’ll Build:
In this example, we’ll create a Tesla Renewal Meeting
notification:
The notification will display details about the
meeting.
The user can close the notification manually using
the close button.
The notification will auto-close after 5 seconds for a
smooth user experience.
@TrailheadIQ
Code Breakdown – HTML Structure
@TrailheadIQ
Code Breakdown –
JavaScript Logic
@TrailheadIQ
HTML Code Overview
Button to Trigger Notification:
A lightning-button that when clicked, triggers the
showNotification method.
Notification Section:
The notification is shown dynamically using if:true=
{isVisible}.
Close Button:
A close button (lightning-button-icon) allows the
user to dismiss the notification.
@TrailheadIQ
JavaScript Code Overview
State Management:
The isVisible variable controls whether the notification
is visible or not.
Handle Selections:
When the button is clicked, showNotification is
triggered, making the notification visible and starting
the auto-close timer.
Hide Notification:
The hideNotification method hides the notification
and clears the auto-close timer.
@TrailheadIQ
Key Features of This Notification
✔️ Dynamic Visibility: Notifications are shown or hidden
based on the isVisible property.
✔️ Auto-Close: Notifications will automatically disappear
after 5 seconds.
✔️ Manual Close: Users can close the notification
manually by clicking the close button.
✔️ Icon and Text Customization: You can easily replace
the icon and text to suit your needs.
@TrailheadIQ
Practical Applications
📌 Use this Notification Component for:
Event Reminders: Display reminders for upcoming
meetings or events.
Error/Success Alerts: Notify users about successful
actions or errors.
User Feedback: Inform users of updates, new
messages, or system changes.
Dynamic Notifications: Trigger notifications based on
user actions or system events.
@TrailheadIQ
Best Practices for Notification
Development
Keep it Simple: Avoid cluttered notifications. Ensure
they’re short and to the point.
Don’t Overuse Notifications: Too many notifications
can overwhelm users.
Provide Clear Close Options: Always provide a way to
dismiss the notification.
Auto-Close Timing: Ensure that auto-close
notifications don't disappear too quickly.
Accessibility: Make sure your notifications are
accessible, including focus management and proper
ARIA labels.
@TrailheadIQ
Conclusion
Now you can display interactive notifications with auto-
close and manual close functionality in your Salesforce
LWC applications.
🔧 Next Steps:
Add more complex notification types (error, success,
info).
Use Apex to trigger notifications based on server-side
events.
Add transition effects to enhance the user experience.
💬 Let’s Discuss: How would you use notifications in your
Salesforce apps? Share your thoughts below!
@TrailheadIQ
THANK
YOU
Remember, every like, share, and comment
helps us reach more people and make a
bigger impact. Together, we can make the
Salesforce community stronger and more
informed.#TrailheadIQ#SalesforceCommunity
www.trailheadiq.com
