Getting Started w/ Zimlets development in less than 30 minutes (using Zimbra Desktop)

Interested in talking about Mash-up's? This is the place.
Zimbra Alumni
Zimbra Alumni
Posts: 187
Joined: Fri Sep 12, 2014 9:55 pm

Getting Started w/ Zimlets development in less than 30 minutes (using Zimbra Desktop)

Postby rrao » Mon Oct 17, 2011 8:41 am


Getting Started w/ Zimlets development in less than 30 minutes (using Zimbra Desktop)

PS: Everything I've written here is documented on our wiki here: ZCS 6.0:Zimlet Developers Guide:Introduction - Zimbra :: Wiki, but this is just a quick-and-easy way to get started
1. Download Zimbra Desktop

Its hard & time consuming to install all the pieces (mysql, jetty, ldap etc) required for Zimbra server on local machine.

On the other hand, Zimbra Desktop is a lighter-version of Zimbra server with a Firefox Prism UI & and also comes with an installer. i.e. When you install Zimbra Desktop, it actually installs Jetty, web-client pieces, sqLite etc behind the scenes.

- Firefox Prism UI is essentially a browser but with some extra privileges and looks like a desktop app.
- Zimbra Desktop basically acts like a sync-client.
- Zimbra Desktop is also multi-account client and can connect to multiple Yahoo!, Gmail, Zimbra or other IMAP or POP accounts.
- Zimbra Desktop runs on Windows, Mac & Linux

OK, now that you know what ZD is, download & install it from here:

Zimbra - Products: Zimbra Desktop Downloads

2. After installing ZD, add a test Zimbra or Gmail or Yahoo mail or any other IMAP account to get inside of ZD
3. Bookmarking ZD's localhost url:

- After you are inside ZD > Settings (on the top right) > Click on Open in Web Browser

(URL looks like: Zimbra offers Open Source email server software and shared calendar for Linux and the Mac.)

- Launch Zimbra Desktop

(URL looks like:
>- Copy that login URL & bookmark it in Firefox/Chrome as they provides awesome debugging
4. Fixed port:

Now, that port 49173 changes every time you restart Zimbra Desktop. Go through

ZCS 6.0:Zimlet Developers Guide:Dev Environment Setup - Zimbra :: Wiki to set fixed port
4.1 Update your ZD bookmark.
5. "&dev=1" mode

- When you login to Zimbra or ZD, its in Production mode - i.e. it wont load all the JavaScript and also it obfuscates everything. So add &dev=1 to download all JS and to see actual JS functions in dev mode. Its slower, but

it helps a lot in debugging.

If your bookmark is:,

update it to:

(If you have "#" "#1" or"#2" at the end, remove it before adding &dev=1)
6. Create a "_dev" folder

- After you install ZD, all the Zimlets are installed in a folder called "zimlets-deployed", you should go into that

folder and create "_dev" folder.

"_dev" folder is a special folder that allows you to simply drop your Zimlet and every time you login to ZD,

the Zimlet will be loaded (as if it was installed).

If you make any change to Zimlet's JavaScript, even that will be picked up when you refresh the browser(w/o having to re-install the Zimlet)
On Windows:

Install directory {zd-install-dir} can be chosen during install time and defaults to c:Program Filesimbraimbra Desktop

User data directory {zd-user-dir} is at c:Documents and Settings{user}Local SettingsApplication Dataimbraimbra Desktop
On MacOS:

Install directory {zd-install-dir} can be chosen during install time and defaults to /Applications/Zimbra Desktop

User data directory {zd-user-dir} is at ~/Library/Zimbra Desktop
7. One last thing you need if you are using Firefox to debug, is Firebug: Install it from here:


Getting your feet wet:


1. Hello world Zimlets:

We get you started we have about 30 hello-world Zimlets targeting various aspects of Zimlet. For example: How to

add a toolbar-button, how to create a tab, how to add a dialog box etc
Lets start with the first hello-world Zimlet:

ZCS 6.0:Zimlet Developers Guide:Examples:Menu Items JS - Zimbra :: Wiki

Download the Zimlet (a Zip file)

and extract it to your "_dev" folder, so it should look like:

2. Click on ZD desktop's bookmark or refresh that browser page and you should see this Zimlet working!
3. Now you have everything set up to do Zimlet development and should be ready to go

4. Open com_zimbra_example_menuitemsjs.xml

4.1 Under tag, add:

4.2 Refresh ZD browser

- you should see new menu item (but it doesnt do anything yet)
5. Open the JavaScript file com_zimbra_example_menuitemsjs.js in any editor (we use intelliJ & TextMate)

5.1 Add another switch-case for id "SOME_MENU_ITEM_ID3":

case "SOME_MENU_ITEM_ID3": (",


5.2 Refresh ZD browser

- Now clicking on the menu-item would open

Installing Zimlets in ZD


Installing Zimlets is different from simply extracting Zimlets into _dev. When you install, the installer registers it in Zimbra's DB and COS etc and also unzips and copies the Zimlet directly into zimlets-deployed folder(not inside _dev)

To install a Zimlet, Create a zip file of your Zimlet, then go to:

ZD > Preferences > Zimlets > Upload Zimlet files and upload the Zimlet

PS: When you zip the Zimlet file, you should *not* zip the folder, but select-all-files inside Zimlet folder and zip

them. On mac/terminal, you do "cd com_zimbra_testzimlet" and then w/in that folder, do "zip -r *"

Next steps:

- Download more hello-world Zimlets from ZCS 6.0:Zimlet Developers Guide:Example Zimlets - Zimbra :: Wiki

and try them out

- Browse Zimbra Gallery and see what's already built & see if you can reuse any of those Zimlets

- There are lot of APIs and hooks to make it easy to build you awesome Zimlets, go through:

ZCS 6.0:Zimlet Developers Guide:Developing Zimlets - Zimbra :: Wiki &

ZCS 6.0:Zimlet Developers Guide:Zimlet API Specifications - Zimbra :: Wiki


ZD v/s ZCS


ZD is a multi-account environment and so if you are making any call to Zimbra-server, you will need to send "account" parameter. For example, if you are creating a folder in ZD, you must send the account(zimbra account or gmail account or which ever account you need to create account in. In ZCS this is not required)
In ZD, if you don't pass account, its most likely get created under Local-folder account.
ZD is our *offline* client. Use appCtxt.isOffline to check if you are offline(i.e. ZD)
ZD also categorizes account into:

appCtxt.accountList.activeAccount (which account does the email you are currently reading belongs to)

appCtxt.accountList.mainAccount (usually local account)

appCtxt.accountList.defaultAccount (First account on the login-page or the account that's displayed by-default)

Return to “Zimlets”

Who is online

Users browsing this forum: No registered users and 3 guests