Alerts
Overview
The alert view widget, located in ./clients/base/views/alert/
, displays helpful information such as loading messages, notices, and confirmation messages to the user.
Methods
app.alert.show(id, options)
The app.alert.show(id, options)
method displays an alert message to the user with the options provided.
Parameters
Name | Description |
id | The id of the alert message. Used for dismissing specific messages. |
options.level | The alert level |
options.title | The alert's title, which corresponds to the alert's level |
options.messages | The message that the user sees Note: Process alerts do not display messages. |
options.autoClose | Whether or not to auto-close the alert popup |
options.onClose | Callback handler for closing confirmation alerts when clicking the x |
options.onConfirm | Callback handler for confirming confirmation alerts |
options.onCancel | Callback handler for canceling confirmation alerts |
options.onLinkClick | Callback handler for click actions on a link inside of the alert |
Default Alert Values
Alert Level | Alert Appearance | Alert Title |
info | blue | "Notice" |
success | green | "Success" |
warning | yellow | "Warning!" |
error | red | "Error" |
process | loading message | "Loading..." |
confirmation | confirmation dialog | "Warning" |
Alert Examples
Standard Alert
app.alert.show('message-id', {
level: 'success',
messages: 'Task completed!',
autoClose: true
});
Confirmation Alert
app.alert.show('message-id', {
level: 'confirmation',
messages: 'Confirm?',
autoClose: false,
onConfirm: function(){
alert("Confirmed!");
},
onCancel: function(){
alert("Cancelled!");
}
});
Process Alert
app.alert.show('message-id', {
level: 'process',
title: 'In Process...' //change title to modify display from 'Loading...'
});
app.alert.dismiss(id)
The app.alert.dismiss(id)
method dismisses an alert message from view based on the message id.
Parameters
Name | Description |
id | The id of the alert message to dismiss. |
Example
app.alert.dismiss('message-id');
app.alert.dismissAll
The app.alert.dismissAll
dismisses all alert messages from view.
Example
app.alert.dismissAll();
Testing in Console
To test alerts, you can trigger them in your browser's developer tools by using the global App
variable as shown below:
App.alert.show('message-id', {
level: 'success',
messages: 'Successful!',
autoClose: false
});