Difference between revisions of "AppSuite:Writing a notification area plugin"

(Basic Notification)
(Basic Notification)
Line 8: Line 8:
 
==Basic Notification==
 
==Basic Notification==
  
This is the most basic code for a notification plugin, it doesn't have api suppport or other things but should work:
+
First let's start with showing the most basic notification plugin you can write.
 +
Create a file named ''register.js'' at ''plugins/notifications/tutorial''.
 +
 
 +
This code doesn't have api suppport or other things but adds a hello world notification:
  
 
<pre class="language-javascript">
 
<pre class="language-javascript">
Line 45: Line 48:
  
 
</pre>
 
</pre>
 +
 +
Now we add a ''manifest.json'' file at ''plugins/notifications/tutorial'' with the following contents:
 +
 +
<pre class="language-json">
 +
{
 +
    "namespace": "io.ox/core/notifications",
 +
    "requires": ""
 +
}
 +
</pre>
 +
 +
This manifest makes sure our code is loaded. You can also define capabilities like ''webmail'' here, if your notifications require specific capabilities to be enabled. They only show up if a user has these capabilities.
 +
 +
===Testing our notification===
 +
 +
Now it's time to test our notification. Build the UI and add ''&customManifests=true'' to the url, because our manifest is only present locally.
 +
 +
after reloading you should see something like this:
 +
 +
[[Image: basicNotification.png]]

Revision as of 09:42, 10 September 2015

Writing a plugin for the notification area

Abstract: This article is a step by step tutorial to build your own notification plugin. These plugins can be used for various purposes, for example reminding the user of something or showing him new invitations.

Basic Notification

First let's start with showing the most basic notification plugin you can write. Create a file named register.js at plugins/notifications/tutorial.

This code doesn't have api suppport or other things but adds a hello world notification:

define('plugins/notifications/tutorial/register', [
    'io.ox/core/extensions',
    'io.ox/core/notifications/subview'
], function (ext, Subview) {

    'use strict';

    ext.point('io.ox/core/notifications/tutorial/item').extend({
        draw: function () {
            this.append( $('<span>').text('hello world'));
        }
    });

    ext.point('io.ox/core/notifications/register').extend({
        id: 'tutorialplugin',
        index: 1000,
        register: function () {
            var options = {
                    id: 'io.ox/tutorialplugin',
                    title: 'Test Notifications',
                    extensionPoints: {
                        item: 'io.ox/core/notifications/tutorial/item'
                    }
                },
                subview  = new Subview(options);

            subview.resetNotifications({ id: 'myNotification1' });
        }
    });

    return true;
});

Now we add a manifest.json file at plugins/notifications/tutorial with the following contents:

{
    "namespace": "io.ox/core/notifications",
    "requires": ""
}

This manifest makes sure our code is loaded. You can also define capabilities like webmail here, if your notifications require specific capabilities to be enabled. They only show up if a user has these capabilities.

Testing our notification

Now it's time to test our notification. Build the UI and add &customManifests=true to the url, because our manifest is only present locally.

after reloading you should see something like this:

BasicNotification.png