Popup Notification / Toast

Overview

Notifications are used to inform the user of an event occurring or a special status.

Notifications come in four different types:

• Success: Indicates a successful or positive action.
• Information: Indicates a neutral informative change or action.
• Warning: Indicates a warning that might need attention. Warnings typically do not halt forward progress with the current action.
• Error: Indicates an error or potentially negative action. Errors often halt forward progress with the current action.

Notifications display in one of 3 formats: inline notifications, popup notifications and banner notifications.

This document describes popup notifications.

Popup notifications display in a small popup window in a corner of the screen, then fade away. They do not take up any real estate in the screen, briefly displaying above the screen in a popup.

Popup notifications can be used if the message is less important for the user to see.

You can optionally take action if the user clicks the popup notification.

Development

Web component development

Component reference

rui-popup-notification

Implementation

Use rui-popup-notification to display a popup notification.

• Specify the notification text with the text property.
• Specify the type of notification to display with the type property.
• Bind the showNotification property to a boolean value in your TypeScript, then set the backing value to true whenever you want to display the popup notification.
• Optionally bind autoDismiss to false to require the user to click to dismiss the notification.
• Optionally handle the rui-click event if you want to perform an action when the user clicks the notification.
• Optionally define a separate button within the popup notification by specifying text for the button using the closeButtonText property and handling the rui-close-button-click event.

Begin by importing the rui-notifications module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-notifications/rui-notifications-imports';

We start by defining a showSuccessPopupNotification boolean property in our TypeScript, initializing that to a value of false. This property will control when the popup displays.

public showSuccessPopupNotification: boolean = false;

Next we add the rui-popup-notification to the HTML with a type of success and an appropriate message to display. We bind the showNotification property to the backing showSuccessPopupNotification boolean property in the TypeScript. We handle the rui-popup-notification-show-notification-change event by resetting the showSuccessPopupNotification backing value.

<rui-popup-notification type="success" text="This is a Success popup notification"
    [showNotification]="showSuccessPopupNotification"
    (rui-popup-notification-show-notification-change)="showButtonPopupNotification = $event.detail"
    (rui-click)="popupNotificationClicked('Success')">
</rui-popup-notification>

In this example, we use a button to trigger the display of the popup notification. This button’s click event handler simply sets the showSuccessPopupNotification boolean property to a value of true when pressed. This displays the popup notification.

<rui-button text="Show Success popup notification" (rui-click)="showSuccessPopupNotification = true">
</rui-button>

We defined popupNotificationClicked() as the event handler for the popup notification’s jhaNotificationClick event. In this example we’re just logging the console message whenever the user clicks the popup notification.

public popupNotificationClicked(notificationType: string) {
    console.log(notificationType + ' notification was clicked');
}

Angular wrapper development

Wrapper reference

jha-popup-notification

Implementation

Use jha-popup-notification to display a popup notification.

• Specify the notification text with the jhaText property.
• Specify the type of notification to display with the jhaType property.
• Bind the jhaShowNotification property to a boolean value in your TypeScript, then set the backing value to true whenever you want to display the popup notification.
• Optionally bind jhaAutoDismiss to false to require the user to click to dismiss the notification.
• Optionally handle the jhaNotificationClick event if you want to perform an action when the user clicks the notification.

Include noty in package.json, where x.y.z is the currently supported version number for this framework specified here. Use npm install to install this framework.

"dependencies": {
    ...
    "noty": "x.y.z",
    ...
},

Once the package has been installed, add it to your scripts bundle in the angular.json file.

"scripts": [
    ...
    "node_modules/noty/js/noty/packaged/jquery.noty.packaged.min.js"
]

Begin by importing the JhaNotificationsModule module into your application.

// import into app.module
import { JhaNotificationsModule } from '@jkhy/responsive-ui-angular/jha-notifications';

@NgModule({
    imports: [
        ...
        JhaNotificationsModule,
        ...
    ]
})

export class AppModule(){}

We start by defining a showSuccessPopupNotification boolean property in our TypeScript, initializing that to a value of false. This property will control when the popup displays.

public showSuccessPopupNotification: boolean = false;

Next we add the jha-popup-notification to the HTML with a type of success and an appropriate message to display. We bind the showNotification property to the backing showSuccessPopupNotification boolean property in the TypeScript. We handle the jha-popup-notification-show-notification-change event by resetting the showSuccessPopupNotification backing value.

<jha-popup-notification jhaType="Success" jhaText="This is a Success popup notification"
    [(jhaShowNotification)]="showSuccessPopupNotification" (jhaNotificationClick)="popupNotificationClicked('Success')">
</jha-popup-notification>

In this example, we use a button to trigger the display of the popup notification. This button’s click event handler simply sets the showSuccessPopupNotification boolean property to a value of true when pressed. This displays the popup notification.

<jha-button jhaText="Show Success popup notification" class="popup-button" (jhaClick)="showSuccessPopupNotification = true">
</jha-button>

We defined popupNotificationClicked() as the event handler for the popup notification’s jhaNotificationClick event. In this example we’re just logging the console message whenever the user clicks the popup notification.

public popupNotificationClicked(notificationType: string) {
    console.log(notificationType + ' notification was clicked');
}

Popup Notification Using a Service

In most scenarios you’ll use the jha-popup-notification element described above. But in some cases it may make more sense to display popup notifications programmatically without using a visual element. For these cases, you can use the JhaNotificationService service.

To do this, first include the JhaNotificationService service.

Call jhaNotificationService.DisplayPopupNotification(notificationText, notificationType) to display a popup notification.

• notificationText is the string message to display.
• notificationType is one of Information, Success, Warning, or Error, all values in the JhaNotificationTypes enum.

Call jhaNotificationService.DisplayPopupNotificationClick(notificationText, notificationType, clickCallback, notificationAutoDismiss) to display a popup notification and do something if the user clicks the notification.

• notificationText is the string message to display.
• notificationType is one of Information, Success, Warning, or Error, all values in the JhaNotificationTypes enum.
• clickCallback is JavaScript to execute when the user clicks the notification.
• notificationAutoDismiss (optional) allows you to require the user to click the notification to dismiss it, when set to false. The popup notification hides when the user clicks it.

// import into your component
import { JhaNotificationService } from '@jkhy/responsive-ui-angular/jha-notifications';
import { JhaNotificationTypes } from '@jkhy/responsive-ui-angular/jha-notifications';

export class PopupNotificationComponent {

    constructor(private jhaNotificationService: JhaNotificationService) {}

    createNotification() {
        this.jhaNotificationService.DisplayPopupNotificationClick('Notification created',
            JhaNotificationTypes.Success, function () { console.log('Notification clicked') });
    }

}

Design

Figma design

Popup notifications (a.k.a. “toast” notifications) display at the bottom-right of the screen for a few seconds, then disappear.

Do not change the size of a popup notification as these are fixed in the dev components.

Adobe XD design

Popup notifications (a.k.a. “toast” notifications) display at the bottom-right of the screen for a few seconds, then disappear.

Do not change the size of a popup notification as these are fixed in the dev components.