Skip to content

Notifications

Detail View and Table View provide functions for showing custom notifications at the top of the page.

Detail View

1
2
3
4
5
6
7
8
// file: hooks/TABLENAME-dv.js
var view = AppGiniHelper.dv; // get detail view variable
var notifications = view.getNotifications(); // get notifications variable
var n1 = notifications.add("Text", Variation.info, true, true, 30); // add notification
// add more...

// render (all) notifications
notifications.show();

Table View

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// file: hooks/TABLENAME-tv.js
jQuery(document).ready(function() {
    // due to lazy loading we have to wait
    var view = AppGiniHelper.tv; // get table view variable
    var notifications = view.getNotifications(); // get notifications variable
    var n1 = notifications.add("Text", Variation.warning, false, false); // add notification
    // add more...

    // render (all) notifications
    notifications.show();
});

Syntax

1
2
notifications.add(innerHTML, variation, dismissable, autoclose, delay);
notifications.show();

Parameters

  • innerHTML (string)
    Contents of the notification. Can be plain text or HTML

  • variation
    Variation

  • dismissable (boolean)

    • true There will be a x-button for closing the notification
    • false No button for closing the notification
  • autoclose (boolean)
    • true Notification will be closed automatically after delay seconds
    • false Notification will not be closed automatically
  • delay (number)
    Interval (in seconds) before the notification will be closed automatically, if autoclose is set

Tips

  • You can add more than one notification before executing notifications.show() method
  • See example below for a shorter variant (with less options)

Example

Less Code

1
2
3
4
5
6
7
8
AppGiniHelper.dv
    .addNotification("Notification #1<br/>Default settings (Variation.info, dismissable, not autoclosing)")
    .addNotification("Notification #2<br/>Variation.success", Variation.success)
    .addNotification("Notification #3<br/>Variation.warning", Variation.warning)
    .addNotification("Notification #4<br/>Variation.danger", Variation.danger)
    .addNotification("Notification #5<br/>This notification is <b>not</b> dismissable and <b>not</b> autoclosing", Variation.warning, false, false)
    .addNotification("Notification #6<br/>This notification is <b>dismissable</b> and auto-closing after 15 seconds", Variation.success, true, true, 15)
    .show();

More customization

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var n = AppGiniHelper.dv.notifications.add("My notification");
n.innerHTML = "My <b>customized</b> notification";
n.variation = Variation.danger;
n.dismissable = true;
n.autoClose = true; // note uppercase "C"
n.delay = 5; // seconds
n.innerHTML += " (will be closed automatically)";

n.onClosing = function(n) {
    console.log("Notification closing...");
    return true; // if you want to close it, return true
    // return false; // if you want to keep it open, return false
};

n.onClosed = function(n) {
    console.log("Notification closed!");
};

n.show();

TODO JSE: Screenshot

See also

Conditional Notifications in Detail View (DV)