ZCS 6.0:Zimlet Developers Guide:Examples:Adding Toolbar Buttons

From Zimbra :: Wiki

Jump to: navigation, search
   Article-alert.png  - This article is a Work in Progress, and may be unfinished or missing sections.

Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png Developing Zimlets Zdg-6-menu-icon-advanced.jpg Advanced Concepts Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg Example Zimlets

Developer Article

Article Information

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



This zimlet will add a "Toolbar Button" to the mail application conversation list and message view toolbars. The new button is added at the end of the existing toolbars.

Screen Shot


Definition File

<zimlet name="com_zimbra_example_toolbarhook" version="1.0" description="An example zimlet that adds a button to the Mail toolbar.">

Handler Object

Below is a snippet from the Handler Object from the zimlet JavaScript file. ZmId is used to identify the view and ZmOperation is used to identify the "View" menu button (in order to determine the index for where to insert the new button).

 * This method gets called by the Zimlet framework when a toolbar is created.
 * @param {ZmApp} app
 * @param {ZmButtonToolBar} toolbar
 * @param {ZmController} controller
 * @param {String} viewId
com_zimbra_example_toolbarhook_HandlerObject.prototype.initializeToolbar =
function(app, toolbar, controller, viewId) {

    if (viewId == ZmId.VIEW_CONVLIST || viewId == ZmId.VIEW_TRAD) {
        // get the index of "View" menu so we can display the button after that
        var buttonIndex = 0;
        for (var i = 0; i < toolbar.opList.length; i++) {
                if (toolbar.opList[i] == ZmOperation.VIEW_MENU) {
                        buttonIndex = i + 1;

        var buttonParams = {
                text: "Toolbar Button",
                tooltip: "This button shows up in Conversation List and Traditional views",
                index: buttonIndex,
                image: "zimbraicon"

        // creates the button with an id and params containing the button details
        var button = toolbar.createOp("HELLOTEST_ZIMLET_TOOLBAR_BUTTON", buttonParams);
        button.addSelectionListener(new AjxListener(this, this._showSelectedMail, controller));   


Zimlet Package com_zimbra_example_toolbarhook.zip

Useful Links

Verified Against: Zimbra Collaboration Server 7.0 Date Created: 2/28/2010
Article ID: http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Adding_Toolbar_Buttons Date Modified: 03/25/2015
Personal tools