The Best Open Source Email & Collaboration Software

WebApp Plug-in Framework Explained: Creating a custom dialog

We will explain the WebApp plug-in framework in a series of different blog posts. Last week, we have shown how to find where WebApp can be extended. This week, we will give an example on actually extending functionality by adding a custom-made dialog.

Dialogs are an important part in the application. When you are creating an email, appointment, a contact or when opening the address book: the contents will be shown in a dialog. In this week's article, we will show how the dialogs work inside Zarafa WebApp and how to create one.

To help plug-in developers use the knowledge presented in this article, we have put the example code in a simple plugin, which is available from our git tree. When you install this plugin, a button is added to the main tool bar that will open up a sample dialog when you click it. This uses the extension point "main.toolbar.actions.last", which adds it to the main tool bar. You can also use this sample plugin to get started on your own plugin.

(Open larger version)

Several types of premade dialogs already exist in the WebApp API. The most basic one, Zarafa.core.ui.Dialog, can be used to do do anything, but more specialized versions exist to deal with Zarafa specific data. This is visible in the class hierarchy for Dialogs, as shown in the following picture:


The following code snippet shows how we can create our own custom dialog. This is just the definition of the dialog and its contents, it does not yet make it available to WebApp yet.



 * @class Dialogs.dialogsexample.dialogs.SimpleDialog
 * @extends Zarafa.core.ui.Dialog
 * The simple dialog which contains Ext.panel.
 * @xtype simpledialog

Dialogs.dialogsexample.dialogs.SimpleDialog = Ext.extend(Zarafa.core.ui.Dialog, {

* @constructor
* @param config Configuration structure

constructor : function(config)
config = config || {};
Ext.applyIf(config, {
defaultTitle            : _('Simple Dialog'),
alwaysUseDefaultTitle   : true,
width                   : 340,
height : 200,

 //Add panel

items                   : [

xtype : 'panel'

 //Call superclass constructor, config);


//Register the dialog xtype
Zarafa.core.ui.Dialog.register(Dialogs.dialogsexample.dialogs.SimpleDialog, 'simpledialog');

You can see that to create custom dialog, we need to extend Zarafa.core.ui.Dialog and call the superclass constructor inside the dialog constructor. Finally the last step what should be done is to register this dialog with a custom xtype like we do in

Zarafa.core.ui.Dialog.register(Dialogs.dialogsexample.dialogs.SimpleDialog, 'simpledialog'); 

And that's it! In the items list, you can put the content that you wish. It can be any type of Ext.Component.

Now we can use our dialog from WebApp.  If you run the following from the Javascript console while WebApp is loaded:



   title : _('My Custom Dialog')



This piece of code will create an instance and show the dialog on screen.

(Open larger version)

The Zarafa.core.ui.Dialog has a couple of generic subclasses which might help in managing MAPI objects - objects that contain information on e.g. e-mail, appointments, etc. When working with MAPIRecord instances, it is useful to use the Zarafa.core.ui.RecordDialog, because it has better support for managing MAPIRecords and has extra functionality for saving the record. For Messages (e.g. Mail and Meeting Requests), we have the Zarafa.core.ui.MessageDialog which extends the RecordDialog functionality to support sending the message to all recipients. More details regarding these subclasses of the Zarafa.core.ui.Dialog will be given in future Blog Posts.


Useful links:

The WebApp API documentation

The WebApp developers manual





Post new comment


Jobs at Zarafa

Zarafa customers