Dojo Popup in Xpages - Working with Serverside Scripts - A simple illustration

It took me a really long time to create a dojo popup in XPages. And it took even longer to get the server side scripts work on that Xpage.

The step by step details of how to do the same is posted in many web sites. But the one that really helped me is the post named XPages: How to create a view picklist - Posted by Mark Hughes 


It describes on how to create a picklist in XPages.

Here I have a more simpler version that could help to have a quick understanding of how to get things done in XPages.

Step 1: Add the following javascript code the XPage 
        dojo.require("dijit.Dialog");
        XSP.addOnLoad(function(){dialog_create("Dialog3")});
  
Step 2: Add the following mark ups to the XPage
    <div id="Dialog3" style="display:none">
        <xp:panel id="Dialog3panel">
            <xp:button id="button3" value="Click this to execute a server script">
                <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:getComponent("eb1").setValue("done")}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>

            <xp:br></xp:br>   
            <xp:button id="button2" value="Close">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[dijit.byId('Dialog3').hide(); ]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
        </xp:panel>
    </div>

    <xp:button value="Click to get Dojo Popup" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[dijit.byId("Dialog3").show() ]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>

    <xp:inputText id="eb1"></xp:inputText>

3. Now associate the following function to the XPage. (I copied this from OpenNTF.org and am passing on the legacy ... Hope you dont mind it :)

function dialog_create(id, title1) {
    var dialogWidget = dijit.byId(id);
    if( dialogWidget )
        dialogWidget.destroyRecursive(true);
   
    dialogWidget = new dijit.Dialog({
            title: title1, duration:600},
            dojo.byId(id));

    var dialog = dojo.byId(id);
    dialog.parentNode.removeChild(dialog);

    var form = document.forms[0];
    form.appendChild(dialog);
    dialogWidget.startup();
}

4: Now preview the Xpage and see how it works

For a more clearer description of how it works  please visit the link mentioned in beginning of the post.

Hope this helps :)