Show Dialog Box from Extension Libray while server side processing

Question

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>

Thank you, Knut, for your prompt assistance! I added the script block with the following line, XSP.addOnLoad(function(){XSP.openDialog("#{id:WaitDialog}");});, but the dialog box did not appear. Am I missing something? — Carolyn
Please add your XPage code to your question - including the dialog box but without the Excel export code (= all the relevant code). — Knut Herrmann
I added the XPage and Custom Control code to my original post. I hope I added it correctly since I'm new to this site. :-) — Carolyn
Your code works for me except for theme "Bootstrap4". I had to delete <xp:this.resources> <xp:script src="/Web Report Functions.jss" clientSide="false"></xp:script> </xp:this.resources>. Maybe there is an issue and page doesn't load because of this JavaScript file? — Knut Herrmann

Adrian Adrian · Accepted Answer · 2018-08-16T12:34:36

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>

Show Dialog Box from Extension Libray while server side processing

2 Answers