From Zimbra :: Wiki

Introduction

Getting Started

Dev Environment Setup

Developing Zimlets

Advanced Concepts

API Specifications

Example Zimlets

Article Information
This article applies to the following ZCS versions.
ZCS 7.0
ZCS 6.0

Description

This zimlet shows-up as a panel item and will display a simple custom dialog on a single or double-click. This example also uses internationalization properties.

Screenshot

Definition File

<zimlet name="com_zimbra_example_simpledialog" version="1.0" description="Create a simple custom dialog.">
    <include>com_zimbra_example_simpledialog.js</include>
    <handlerObject>com_zimbra_example_simpledialog_HandlerObject</handlerObject>
    <zimletPanelItem label="${msg.simpledialog_label}" icon="zimbraIcon">
      <toolTipText>${msg.simpledialog_tooltip}</toolTipText>
   </zimletPanelItem>
</zimlet>

Creating the Dialog

Here is snippet from the Zimlet Handler Object (_displayDialog() method) where we create and show the dialog:

  var sDialogTitle = this.getMessage("simpledialog_dialog_title"); // get i18n resource string
  var sStatusMsg = this.getMessage("simpledialog_status_launch"); // get i18n resource string
	
  this.pView = new DwtComposite(this.getShell()); //creates an empty div as a child of main shell div
  this.pView.setSize("250", "150"); // set width and height
  this.pView.getHtmlElement().style.overflow = "auto"; // adds scrollbar
  this.pView.getHtmlElement().innerHTML = this._createDialogView(); // insert html to the dialogbox
	
  // pass the title, view & buttons information to create dialog box
  this.pbDialog = new ZmDialog({title:sDialogTitle, view:this.pView, parent:this.getShell(), standardButtons:[DwtDialog.DISMISS_BUTTON]});

  this.pbDialog.setButtonListener(DwtDialog.DISMISS_BUTTON, new AjxListener(this, this._okBtnListener)); 

  this.pbDialog.popup(); //show the dialog

The _createDialogView() method creates the html mark-up using an Array:

/**
 * Creates the dialog view.
 * 
 */
com_zimbra_example_simpledialog_HandlerObject.prototype._createDialogView =
function() {
  var html = new Array();
  var i = 0;
  html[i++] = "<table>";
  html[i++] = "<tr>";
  html[i++] = "<td colspan='2'>";
  html[i++] = "This is a sample dialog with HTML code";
  html[i++] = "</td>";
  html[i++] = "</tr>";
  html[i++] = "<tr>";
  html[i++] = "<td>";
  html[i++] = "Some field ONE:";
  html[i++] = "</td>";
  html[i++] = "<td>";
  html[i++] = "<input id='simpledlg_someField1'  type='text'/>";
  html[i++] = "</td>";
  html[i++] = "</tr>";
  html[i++] = "<tr>";
  html[i++] = "<td>";
  html[i++] = "Some field TWO:";
  html[i++] = "</td>";
  html[i++] = "<td>";
  html[i++] = "<input id='simpledlg_someField2'  type='text'/>";
  html[i++] = "</td>";
  html[i++] = "</tr>";
  html[i++] = "</table>";
		
  return html.join("");
};

Download

Useful Links

• Simple Dialog using a Template
• Internationalization