How do I create a new button on the Calendar toolbar

I am new to Zimlet creation however I found the code sample to place a button on the Mail Tab toolbar. What I do not know or understand is what I would need to change it to place one on the calendar tab toolbar next to the View pull down.

Can someone please provide an example?


Sample of button on the Mail tab toolbar

Code:

---

com_zimbra_example_toolbarhook_HandlerObject = function() {
};
com_zimbra_example_toolbarhook_HandlerObject.prototype = new ZmZimletBase;
com_zimbra_example_toolbarhook_HandlerObject.prototype.constructor = com_zimbra_example_toolbarhook_HandlerObject;

/**
 * This method gets called by the Zimlet framework when a toolbar is created.
 *
 * http://files.zimbra.com/docs/zimlet/zcs/6.0/jsdocs/symbols/ZmZimletBase.html#initializeToolbar
 */
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;
                        break;
                }
        }

        var buttonParams = {
                text    : "Button",
                tooltip: "Test Button",
                index: buttonIndex, // position of the button
                image: "zimbraicon" // icon
        };

        // 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)); 
    }
};

/**
 * Shows the selected mail.
 *
 */
com_zimbra_example_toolbarhook_HandlerObject.prototype._showSelectedMail =
function(controller) {

        var message = controller.getMsg();

        appCtxt.getAppController().setStatusMsg("Subject:"+ message.subject);
};

---

Hi,

Sadly I'm not here to provide a solution, but I also want to know how to create a toolbar beside on the mail view. But, on my case, I need to put it on the contact list view. To help us, can someone provide a solution, considering not only the calendar and contact view, but any view? Maybe we should put it on the wiki for future reference!

To create button on calendar toolbar, add one more if condition in initializeToolbar method like this:

if(view == "CLD" || view == "CLWW" || view == "CLM" || view == "CLW" || view == "CLL" || view == "CLS" || view == "CAL") {
var buttonArgs = {
text: "buttonText",
tooltip: "Button Text",
index: buttonIndex
image: "tabIcon"
};
var button = toolbar.createOp("buttonID", buttonArgs);
button.addSelectionListener(new AjxListener(this, this._handleBtnClick, [controller, app]));
}

You can do that for any view. All you need to do is get their viewId and put the if conditions like above in initializeToolbar method and you are done.

Here are other examples : the code below shows how to add a button to the compose mail view, the create contact view and the create appt view.

You have to implement the initializeToolbar function. This function is called by the framework anytime it shows a toolbar (I think). In this function, you test for what view you're in to create a button for the right toolbar. I prefer to define a function to create buttons, there's one for each but I only included createMailButton, otheres are very alike.

Some views have the same ID suffixed by a number, that's why I have this toolbar.getButton() test in each if condition to check that the button haven't been created before (otherwise you'll find yourself with multiple identical buttons).

Hope this helps.

Code:

---

SugarBee.prototype.initializeToolbar = function(app, toolbar, controller, viewID){
        if (!toolbar.getButton(SugarBee.addMailButtonID) && viewID.indexOf(ZmId.VIEW_COMPOSE) >= 0){
                this._createMailButton(toolbar,controller);
        }

        else if (!toolbar.getButton(SugarBee.addContactButtonID) && viewID == ZmId.VIEW_CONTACT){
                this._createContactButton(toolbar,controller);
        }

        else if (!toolbar.getButton(SugarBee.addApptButtonID) && viewID.indexOf(ZmId.VIEW_APPOINTMENT) >= 0){
                this._createApptButton(toolbar,controller);
                _toolbar = toolbar;
        }
};

SugarBee.prototype._createMailButton = function (toolbar,controller){

    var args = {
        text    : "Envoi+copie sugar",
        tooltip : "Envoi l'e-mail et crée une copie dans SugarCRM",
        image  : "plus",
        index  : 1,
        enabled : true
    };
   
    var bouton = toolbar.createOp(SugarBee.addMailButtonID,args);
    toolbar.addOp(SugarBee.addMailButtonID,1);
    bouton.addSelectionListener(new AjxListener(this._displayMessage,controller));
    SugarBee.addMailbuttonCreated = true;
};

---