Alerts And Notifications

From a technical point of view, the Client is responsible for handling alerts and notifications. The reason for this is when an alert or notification pops up, the UI or the page still might not be loaded. The Client can display a number of messages to the user: these can either be notifications (meaning that they are displayed for a period of time and then automatically disappear) or pop-up alerts. Alerts and notifications aren't technically components, but they are visual elements on a page and this is why you can find them in the Components section.

Alerts

Alerts show up in pop-up windows and remain there until the user closes them. While an alert is displayed, the user is unable to use the application. Use pop-up alerts if you need user interaction or the message is of high importance.

In JBStrap, you can use the following alert types:

Say – A plain text message meant to “say” something to the user. The user can only acknowledge the message by clicking OK. A ' say' alert does not interrupt program execution.

Say popup

Error –A plain text message notifying the user of an error. The program execution is not interrupted.

Error popup

Ask –Use this to ask the user a Yes/No question. Program execution will be interrupted. The user response is received as a Boolean value ( true for ‘Yes’ and false for ‘No’).

Input – This pop-up window prompts the user to enter some text. Program execution is interrupted until the user action is received. User response is stored as a string value. If the user clicks OK without entering any text, the result will be an empty string. If the user presses ESC or clicks ‘Cancel’, the result will be a NULL value.

Input popup

Plain information message:

Error message:

Yes/No question:

        boolean result = client.ask("Are you sure","Are you sure delete this file", AlertButton.OK, AlertButton.CANCEL, true);
       

User input message:

        String result = client.input("Enter your name","Please enter your name", AlertButton.OK, AlertButton.CANCEL);
       

Notifications

Notifications appear in the upper right corner of the interface only for a short period of time and then automatically disappear. When several such messages are queued to get displayed, they will be listed below one another. You can keep them on the screen by just holding the mouse over them. Use a notification to display some information of lower importance to the user (program execution will proceed uninterrupted).

Here are the four types of notifications used in JBStrap:

Success – Use this one notify the user of a successful operation.

Success popup

Info – Use this one to display information.

Info popup

Warning – Use this one to display warning messages.

Warning popup

Error – Use this one to display error messages.

Error notification

Operation successful:

        client.showNotification(NotificationType.SUCCESS, "Title", "Notification message");
       

Display information:

        client.showNotification(NotificationType.INFO, "Title", "Notification message");
       

Display a warning message:

        client.showNotification(NotificationType.WARNING, "Title", "Notification message");
       

Display an error message:

        client.showNotification(NotificationType.ERROR, "Title", "Notification message");
       

Style customization

Name	Default value	Derived value	Computed value	Comment
$toastr-color	$white	-	#fff	Toast font color
$toastr-hover-color	$gray-400	-	$gray-400	Toast hover color
$toastr-warning-color	$body-color	-	$gray-900	Toast warning color
$toastr-width	$font-size-base * 23	-	23 rem	Toast width
$toastr-shadow	0 0 $font-size-base $gray-600	-	0 0 1 $gray-600	Toast shadow
$toastr-hover-shadow	$floating-shadow	0 0 1.875rem rgba($black, 0.1)	0 0 1.875rem rgba(#000, 0.1)	Toast hover shadow
$toastr-border-radius	$border-radius	-	$border-radius	Rounded toast corners