One important thing to add is that I have tried to use the Extention Library <dropDownButton> control, but I get an unexpected runtime error message "not implemented".

 

 

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>
 

 

 

I have build a dropbuttonbutton yourself using the xe:Tooltipdialog and embedding a table with links or buttons.

You can completely change the looks and even use a repeat control to fill in the contents.

 

Thanks, Ive tried your code, and followed your steps, but now I am getting the dreaded 404 item not found exception.  Any hints as to why that might be happening?

 

Thanks again 

 

Greg 

Hi Mark,

 

Thanks for the example. Unfortunately I am not able to make it work with server side JS. When the item is clicked only the client side JS is executed but not the server one. I guess that the reason for this is the fact that the content of dijit.Menu is moved outside form tag.
Do you have any idea how to solve this issue?

Hi Mirek,

 

Read this blog post: http://lotusnotus.com/lotusnotus_en.nsf/dx/dojo-dialogs-in-xpages-deep-dive-into-partial-updates....htm

It describes the same problem as you're having and has a possible solution for it.

 

Mark

Hi Mark,

 

Thanks for the fast feedback, I will try it out.