This is a short tutorial on how to write a simple WebApp plugin, the plugin will add a widget to the WebApp’s mail settings tab. The widget will allow a user to remove email addresses and domains from the safesenders list in the users WebApp settings.
We start of looking at the manifest.xml file, the file contains the following information for your plugin:
Source is used when you develop the plugin, release is the file which is loaded when you have issued an ant deploy and ant deploy-plugins. Usually these deploy commands are run when building an webapp package for your distro.
CSS files are defined as following.
The build.xml file should be copied from another plugin directory. This file is required by ant to build and deploy the plugin.
Now that we discussed the manifest and build file we need to create a js directory and create the file js/SafeSenders.js, since the other files are generated by ant.
In the js/SafeSenders.js file we will copy paste the following code.
The code above, does the following things. It declares a namespace for the plugin, creates the plugin class (SafeSenders) and when the WebApp “is ready” it registers the plugin so that it appears in Settings -> Plugins. According to the documentation Zarafa.onReady() is described as: Adds a listener to be notified when Zarafa is ready. This will be somewhere during Ext.onReady, when Zarafa has initialized the bare essentials. When the event is fired, the Zarafa.core.Container will be available, and plugins are allowed to register.
Now that the plugin is registered, we can make use of insertion points in the WebApp to extend the WebApp’s functionality. Insertion points are described in the WebApp Developers Manual, basically you can insert your own functionalitiy, buttons, widgets in the WebApp. Note that you can enable the ‘developer plugin’ to view all the insertion points in the WebApp.
For this plugin we want to add a widget to the mail settings tab. There is an insertion point called ‘context.settings.category.mail’ which allows us to add a widget.
If we take a look at the class Zarafa.mail.settings.SettingsMailCategory, it allows us to add a new widget. The widget should extend the same class as for example Zarafa.mail.settings.SettingsComposeWidget.
We now create the directory js/settings and create the file js/settings/SettingsSafeSendersWidget.js.
This file will implement the widget which will remove an “email address or domain” from the safe senders list, which we will not handle in this post.
The last thing we will add is registering the SettingsSafesendersWidget in the insertion point in js/SafeSenders.js by adding the following code in initPlugin after the Zarafa.plugins.safesenders.SafeSenders.superclass.initPlugin.apply.
And adding the function safeSendersWidget in js/SafeSenders.js:
We have now implemented a bare widget in the WebApp’s mail settings, which doesn’t do anything yet. I won’t discuss the rest of the implementation, but you can find the full source here.