Simple Dialog Box In XPage

Creating Simple Dialog Box In XPage

The following is a procedure that will help you to create a simple Dojo Dialog Box in XPage

1. Create an XPage
2. Create a Panel and put some text inside it
3. In the All properties tab of the XPage, Mark the parameters, dojoTheme and dojoParseOnLoad as true (refer to the following figure)

4.Move to the source code panel and add the following code snippet

<xp:this.resources>
        <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
    </xp:this.resources>

5. Now add a button and in the onclick event of the button (client side)
put the following client side javascript

dijit.byId("myDialogContainer").show()

Now preview your XPage on the client or on the browser and click the button.
You will be able to see a nice dojo popup

The source code of the Xpage that I developed for this particular task is as follows,

<?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.Dialog"></xp:dojoModule>
    </xp:this.resources>
       
    <xp:button value="Dialog Popup" id="button2">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[dijit.byId("myDialogContainer").show()]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>
   
    <div id="myDialogContainer" dojoType="dijit.Dialog"
        style="display:none">
        <xp:panel>Test Popup</xp:panel>
    </div>
       
</xp:view>