Hi,

 

I've tried the dropDownButton control, but couldn't get it to work either. Off to a Dojo solution then...

 

You'll need to use the dijit.form.DropDownButton and  dijit.Menu widgets. Read about them here http://docs.dojocampus.org/dijit/form/DropDownButton and here http://docs.dojocampus.org/dijit/Menu

 

To use them in an XPage:

• Create a new XPage
• Go to the Resources property panel and add the two Dojo modules mentioned above. This will load the required libraries when you open the XPage.
  
• Set the dojoParseOnLoad and dojoTheme properties of the XPage to true. The first will parse check all HTML contents of the XPage for Dojo widgets when opening it, the second will load the required Dojo stylesheets.
• Add the HTML code to generate the widgets. See the links above (look for the "Declarative examples") to find out what you need to write to generate the widgets.
  

If you follow the steps above you'll end up with an XPage that should look like this:

 

 

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
    dojoTheme="true">

    <xp:this.resources>
        <xp:dojoModule name="dijit.Menu"></xp:dojoModule>
        <xp:dojoModule name="dijit.form.Button"></xp:dojoModule>
    </xp:this.resources>

    <xp:div dojoType="dijit.form.DropDownButton">
        <span>File</span>
       
        <xp:div dojoType="dijit.Menu">
       
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Link" id="link1">
                    <xp:eventHandler event="onclick" submit="false">
                        <xp:this.script><![CDATA[alert("Wow! You've clicked the first link.");]]></xp:this.script>
                    </xp:eventHandler></xp:link>
            </xp:div>
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Link" id="link2"></xp:link>
            </xp:div>
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Link" id="link3"></xp:link>
            </xp:div>
       
        </xp:div>
       
    </xp:div>
   
    <xp:div dojoType="dijit.form.DropDownButton">
        <span>Edit</span>
       
        <xp:div dojoType="dijit.Menu">
       
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Cut" id="link4"></xp:link>
            </xp:div>
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Copy" id="link5"></xp:link>
            </xp:div>
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Paste" id="link6"></xp:link>
            </xp:div>
       
        </xp:div>
       
    </xp:div>
   
        <xp:div dojoType="dijit.form.DropDownButton">
        <span>View</span>
       
        <xp:div dojoType="dijit.Menu">
       
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Cut" id="link7"></xp:link>
            </xp:div>
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Copy" id="link8"></xp:link>
            </xp:div>
            <xp:div dojoType="dijit.MenuItem">
                <xp:link escape="true" text="Paste" id="link9"></xp:link>
            </xp:div>
       
        </xp:div>
       
    </xp:div>


</xp:view>