Pages

Thursday, May 20, 2010

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>

Pain Point: Using this method one can probably use these pop ups in places that does not require any server side operations. 'cos server side script does not work with any elements inside this popup.

To work with server side scripts in dojo popups in XPages refer to the following post:
Dojo Popup in Xpages - Working with Serverside Scripts - A simple illustration


Hope this helps :)

10 comments:

  1. Thanks for your Simple Dialog Box In XPage

    ReplyDelete
  2. In case your readers want plain dialog box with xpage, they can see my dojo dialog box tutorial

    ReplyDelete
  3. hey, thanks for sharing this Xpage code for dojo dialog box. Nice way to get around the static nature of dojo dialogs

    ReplyDelete
  4. hi ,

    how to close the dialog opened on click of button in x pages. Please help

    ReplyDelete
  5. New to xpages..simply copied the source code in to an xpage and did a Design preview in Webbrowser as well as Notes, but getting an exception error? any ideas?

    ReplyDelete