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

Hello

Source files

lib/amd/src/notification.js
lib/templates/notification_info.mustache
lib/templates/notification_success.mustache
lib/templates/notification_warning.mustache
lib/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

core/notification_success

{
    "message": "Your pants are on awesome!",
    "closebutton": 1,
    "announce": 1,
    "extraclasses": "foo bar"
}

core/notification_warning

{
    "message": "Your pants are on down!",
    "closebutton": 1,
    "announce": 1,
    "extraclasses": "foo bar"
}

core/notification_error

{
    "message": "Your pants are on fire!",
    "closebutton": 1,
    "announce": 1,
    "extraclasses": "foo bar"
}

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}}