Display Custom Notification when Data Changes in ListBox
Whenever data changes in the ListBox by adding, removing, selecting items or in any other way, it is a good practice to display a notification message stating the change. You can either use the standard alert popup box or display custom toast notification.
In this article, you will learn how to show toast notification messages using Toaster component. A toast is a small popup alert that shows a text message with an icon, usually appears in top right corner on the page. Sample code is available in JavaScript, Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, whenever a new item is added or removed from the list, a toast notification will appear, staying the data change in the ListBox. This notification message will stay for few seconds and then slowly disappear. If there are multiple data changes, more than one toasts will appear, one after another.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Show Toast Notifications
In order to display toast notification, at first you need to setup the Toaster component. To do that, in HTML you need to add the toaster by using iui-toaster tag, anywhere in the page. Then in code, you can set up the following:
- alignment - determines where toasts will appear: top or bottom right corner, in the middle or top or botom left corner
- contentTemplate - specifies a template that you can use to add custom HTML content as notification
- duration - how long Toasts will remain visible, in miliseconds
- parentId - specifies the parent container where Toasts will appear
- text - specifies the notification message
- title - specifies the notification title
- type - Specifies the Toast type: Error, Info, Success or Warning
There are additional settings avaulable, but to simplify the example only few of them are presented here.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Once you have the Toaster component ready, you can start showing toast notifications, using the show method. This method accepts a toast object which is composed of message text, title and type. Here is an example:
Depending one the toast type, a notification message appears with different background: Red for Error, Blue for Info, Green for Success and Orange for Warnning. In this example, there are no conditions set and the toasts always appear as success.
Using the contentTemplate property, you can have unique toast notifications by creating custom template where you can add custom HTML elements.
Conclusion
Many data changes in the ListBox component like adding or removing items are accompanied with events. You can use these events to create custom notification messages. In this case, a toast notification is in use, with which you can set up where the notification alert will appear and for how long it will remain visible. In addition, using custom templates instead of just showing plain text notifications, you can create a unique popup message by adding custom HTML elements.
A sample code is available in JavaScript, Angular, React and Vue that shows how to display custom notifications. The ListBox is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.