How to show notification message as popup

Permalink
I'm trying to figure out how to display a little notification popup from a custom dashboard interface I'm building...essentially the notification popup that shows on the top right of pages as alerts and then slides out of view after a few seconds.

Does anyone know how to do this?

stephendmalloy
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi stephendmalloy,

Both concrete5 5.7 and v8 have a notification system as part of the core. I am going to cover v8.

Version 8 uses the PNotify JS library for creating notifications. PNotify has been built into the app.js file that loads in the dashboard and when the edit toolbar is visible.
https://github.com/sciactive/pnotify...

There are several ways to use notifications.

One is use the concrete UI helper service.
https://github.com/concrete5/concrete5/blob/develop/concrete/src/App...
Example:
- this can be added into a view or method to display on the page
// inject a notification into the view or method
$this->addFooterItem(
    Core::make('helper/concrete/ui')->notify(
        array(
            // type
            // - info: blue background and light blue text
            // - success: green background and white text
            // - error: red background and white text
            'type' => 'info',
            // icon
            // - display Font Awesome icon
            'icon' => 'fa fa-internet-explorer',
            // title
            // - h4 title text
            'title' => t('Old Browser Alert'),

Another option is to use the core ConcreteAlert JavaScript object and it's notify method.
https://github.com/concrete5/concrete5/blob/bb8f19f45e225bc6e9543c59...
Example:
<script>
$(document).ready(function() {
    ConcreteAlert.notify({
        type: 'info',
        icon: 'internet-explorer',
        title: 'Old Browser Alert',
        message: 'Ewwww you are using an old version of Internet Explorer!',
        hide: true,
    });
});
// Defaults:
// concrete\js\build\core\app\alert.js
// notify: function(defaults) {
//     var options = $.extend({
//         type: 'success',

You can also call the PNotify() function directly with pure JavaScript to create a notification.
- calling PNotify() like this allows you to use all the options and modules that are part of the library
Example:
<script>
$(document).ready(function(){
    new PNotify({
        type: 'info',
        icon: 'fa fa-internet-explorer',
        title: 'Old Browser Alert',
        text: 'Ewwww you are using an old version of Internet Explorer!',
        hide: true
    });
});
</script>

You can use the "addclass" custom class to add custom styling to the notification. This class is added to the div with the class of "ui-pnotify".
Example:
<style>
div.ui-pnotify.my-notification-class .ui-pnotify-container {
    background: #D2BE70;
}
</style>
Gondwana replied on at Permalink Reply
Gondwana
Great info! Would this be worthy of a how-to?
stephendmalloy replied on at Permalink Reply
stephendmalloy
MrKDilkington thank you so very much for this detailed explanation! Greatly appreciated!

Cheers and Happy Holidays!