Search code examples
xpagesxpages-extlib

Show Dialog Box from Extension Libray while server side processing


I have a XPage where it has code in the beforeRenderResponse event which exports data to Excel.

I would like to have the "Please wait..." dialog box that I created from the extension library to appear before the export starts. I tried getComponent("dialogbox").show() but it appears to ignore that line before the export starts.

Do you have any suggestions of how to display the dialog box on the XPage in either SSJS or CSJS? Thanks in advance for your assistance.

Edited to add the XPages and Customer Control code.

XPages code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xp_1="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:script src="/Web Report Functions.jss"     clientSide="false"></xp:script>
    </xp:this.resources>
    <xp:this.afterRenderResponse><![CDATA[#{javascript:/*...(export to excel code)...*/}]]></xp:this.afterRenderResponse>
    <xc:WaitDialogBox></xc:WaitDialogBox>
    <xp:scriptBlock id="showDialog">
        <xp:this.value><![CDATA[XSP.addOnLoad(function(){XSP.openDialog("#{id:WaitDialog}");});]]></xp:this.value>
    </xp:scriptBlock>
</xp:view>

Custom control code "WaitDialogBox":

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:dialog id="WaitDialog" title="Please wait...">
    <xp:table>
    <xp:tr>
    <xp:td>
    Processing....
    <xp:br></xp:br>
    <xp:br></xp:br>
    Please wait until you see the &quot;Do you want to open or save...&quot; bar on the bottom of your screen.
    <xp:br></xp:br>
    </xp:td>
    </xp:tr>
    <xp:tr>
    <xp:td style="padding-top:10px;margin-top:10px;text-align:center;">
    <xp:image url="/ajax-loader.gif" id="processImage"></xp:image>
    </xp:td>
    </xp:tr>
    </xp:table></xe:dialog>
</xp:view>

Solution

  • So if you want to show a message while the export is running (regardless what kind of message, dialogbox or the dojo standby as proposed by Howard), you must ensure that the page is loading first without doing the export and start the export then.

    On my sample page take a look at the rendered property on the view tag. I do there a check if a param export is on the request url. This is also done at the beginning of the afterRenderResponse event.

    Then in the showDialog script block, I open the dialog and change the url of current window by adding ?export=true. You are free to replace the dialog with anything else. With this solution it's not possible to do something (i.e. close the dialog) when the export is finished and ready for download.

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core"
        xmlns:xc="http://www.ibm.com/xsp/custom"
        rendered="#{javascript:param.get('export') != 'true'}">
        <xp:this.afterRenderResponse><![CDATA[#{javascript:
        if(param.get('export') == 'true'){
            /*...(export to excel code)...*/
        }}]]></xp:this.afterRenderResponse>
        <xc:WaitDialogBox></xc:WaitDialogBox>
        <xp:scriptBlock id="showDialog">
            <xp:this.value><![CDATA[
    XSP.addOnLoad(function(){
        XSP.openDialog("#{id:WaitDialog}");
        location.href='#{javascript:return context.getUrl().getPath()}?export=true';
    });]]></xp:this.value>
        </xp:scriptBlock>
    </xp:view>