Notifications

Notification dizmos may be used to, for example, greet a user or notify them of a new e-mail in their inbox.

The default positioning of a notification

Use the viewer.notify(opts) function to make a notification dizmo appear. By default, the notification appears along the right edge starting from the top. It automatically chooses a free slot to position the next notification dizmo.

Notification dizmo options

The opts parameter contains the options the dizmo will be instantiated with. All parameters below except for title are optional:

title: a required string for the first line of the notification; HTML markup is allowed. Maximum length is 21 characters.
button_1: a string denoting the name of the right-hand side upper button. If not set, then no corresponding button is shown.
button_2: a string denoting the name of the right-hand side lower button. If not set, then no corresponding button is shown.
callback: a function to be invoked with a message string as a parameter. The message indicates either a click, timeout, or ignore, or one of the button names (in lower cases), or button-1 and button-2. The second parameter is a custom-defined data object. The this scope of the function is the notification invoking the callback.
color: a string hex code to color the frame of the notification.
closable: a boolean flag to enable auto-close when the upper button is clicked. Default is undefined. If closable is set and the button_1 is not set, then button_1 is set to close.
data: an object with custom data, which is provided as an argument with the callback.
icon: a string URL or relative path to an icon. It is by default the image at assets/Icon.svg of the notifying dizmo that is chosen.
notification_id: a string identifying an existing notification dizmo to refresh.
opacity: a number between 0.0 and 1.0 to set the opacity.
sub_title: a string denoting the second line of the notification. HTML markup is allowed. Maximum length is 32 characters.
text: a string denoting the third line of the notification. HTML markup is allowed. Maximum length is 32 characters.
timeout: a number in milliseconds to auto-close the notification dizmo. If it is set to null, then the timeout is disabled.
path: a string denoting an internal path to be used to communicate between the notifying and notification dizmos. The default is notification.
important: a boolean causing the notification dizmo to be displayed with a red background color.

Simple example

    viewer.notify({title:"Good morning!"});

Full example

    viewer.notify({
        button_1: 'Close',
        button_2: 'Reply',
        title: 'My Contact',
        sub_title: 'RE: Last Email',
        text: 'Oh, this is brilliant&mdash;how soon can we get this working?',
     // important: true,

        callback: function (message) {

            switch (message) {
                case 'click':
                    console.debug('from', this.identifier, '=>', 'click');
                    break;
                case 'timeout':
                    console.debug('from', this.identifier, '=>', 'timeout');
                    break;
                case 'reply':
                    console.debug('from', this.identifier, '=>', 'reply');
                    break;
                case 'close':
                    console.debug('from', this.identifier, '=>', 'close');
                    this.publicStorage.setProperty('close', true);
                    break;
                default:
                    console.debug('from', this.identifier, '=>', message);
            }
        },

        timeout: 5000 // or: null
    });

Custom image

By default, Icon.svg in the assets Folder of the notifying dizmo is used as the image for the notification. If you want to use your own, copy it into the assets Folder of your dizmo, and then add the icon option:

    viewer.notify({title:"Threshold reached","icon":"assets/warning-triangle.svg"});