Thursday, July 22, 2010

Dojo drop down button in XPages

The post speaks about how a simple drop down action button can be created in XPage using dojo



The code fragment that is necessary to the job is  as follows 
       dojo.require("dijit.form.Button"); dojo.require("dijit.Menu");
         dojo.addOnLoad(function() { var menu = new dijit.Menu({ style:
        "display: none;" }); var menuItem1 = new dijit.MenuItem({ label:
        "Save", iconClass: "dijitEditorIcon dijitEditorIconSave",
        onClick: function() { alert('save'); } });
        menu.addChild(menuItem1);

        var menuItem2 = new dijit.MenuItem({ label: "Cut", iconClass:
        "dijitEditorIcon dijitEditorIconCut", onClick: function() {
        alert('cut'); } }); menu.addChild(menuItem2);

        var button = new dijit.form.DropDownButton({ label: "hello!",
        name: "programmatic2", dropDown: menu, id: "progButton" });
        dojo.byId("dropdownButtonContainer").appendChild(button.domNode);
        });

Ensure that you add the following div tag to your page. Or else you might see a black page with possible an error in the console
    <div id="dropdownButtonContainer"></div>
</xp:view>

2 comments:

  1. Hi, it is quite impressive. But let me note that it cannot be used when the offered menu items are supposed to call server side JS. I have tried to make it work but no luck so far.

    ReplyDelete
  2. yes you are correct. The SSJS does not work with this one directly. But there are ways to make them work. All you got to do is simulate an other button's click event .. :)

    Hope you get the point

    ReplyDelete