Skip to main content
Notifications
Moodle notifications
Available
Needs review
How it works
Notifications are coupled with actions and provide instant feedback to the action results. Moodle notifications are shown right above the actionable content or overlaying the user interface for JavaScript related actions.
Example
Source files
lib/amd/src/notification.jslib/templates/notification_info.mustachelib/templates/notification_success.mustachelib/templates/notification_warning.mustachelib/templates/notification_error.mustache
Core renderer
Notifications can be added in PHP using the core renderer notification method
<?php
$OUTPUT->notification('message', 'info');
?>
Notification templates
core/notification_info
{
"message": "Your pants are on awesome!",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
core/notification_success
{
"message": "Your pants are on down!",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
core/notification_warning
{
"message": "Your pants are on fire!",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
core/notification_error
JavaScript Notifications
{{#js}}
require(
[
'core/notification'
],
function(
Notification
) {
document.querySelector('[data-action="shownotification"]').addEventListener('click', function() {
Notification.alert('Notification message', 'Extra content for notification message');
});
});
{{/js}}
<button class="btn btn-secondary" data-action="shownotification">Show JS Notification</button>
{{#js}}
require(
[
'core/notification'
],
function(
Notification
) {
document.querySelector('[data-action="shownotification"]').addEventListener('click', function() {
Notification.alert('Notification message', 'Extra content for notification message');
});
});
{{/js}}Toast Notifications
{{#js}}
require(
[
'core/toast'
],
function(
Toast
) {
document.querySelector('[data-action="showtoastnotification"]').addEventListener('click', function() {
Toast.add('Toast message');
});
});
{{/js}}
<button class="btn btn-secondary" data-action="showtoastnotification">Show Toast Notification</button>
{{#js}}
require(
[
'core/toast'
],
function(
Toast
) {
document.querySelector('[data-action="showtoastnotification"]').addEventListener('click', function() {
Toast.add('Toast message');
});
});
{{/js}}