Waiting icon / message in xpages

问题

I want to use some waiting dialog / icon / image when code is running. Once code is finished want to stop that icon. I have gone through material available on web but failed to get or understand.

I am using SSJS script which calls agent at back end. It tooks 20-30 seconds in processing.

I have gone through but don't know the utilization?

https://openntf.org/XSnippets.nsf/snippet.xsp?id=bootstrap-standby-dialog

http://xpagesera.blogspot.com/2012/05/add-ajax-loading-control-in-xpages-for.html

http://lotusnotus.com/lotusnotus_en.nsf/dx/xpages-tip-a-modal-waiting-dialog-for-background-processes..htm

I have tried the following It's working fine with browsers for IBM Notes 9.0.1 but not working in XPiNC. Where I am using One UI V 2.1 its not working in XPiNC or in Web Client.

   <xp:this.resources>
        <xp:dojoModule name="extlib.dijit.ExtLib"></xp:dojoModule>
        <xp:dojoModule name="extlib.dijit.Loading"></xp:dojoModule>
   </xp:this.resources>

In event handler I have used following events on my page with partial refresh.

   <xp:this.onStart><![CDATA[XSP.startAjaxLoading()]]></xp:this.onStart>
   <xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
   <xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>

How can I achieve this function by using this code on both clients and on One UI 2.1.

I really appreciate your responses received on my initial question and do expect the same.

Best Regards, Qaiser Abbas

回答1:

Here is an example XPage for your second link Add AJAX “Loading..” control in XPages for Partial Updates:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="margin:200px">
    <xp:this.resources>
        <xp:dojoModule name="extlib.dijit.Loading" />
    </xp:this.resources>
    <xp:button id="button1" value="Show time in 3 seconds">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panel1">
            <xp:this.action><![CDATA[#{javascript:
                viewScope.clickTime = new Date();
                var waitUntil = viewScope.clickTime.getTime() + 3000; 
                while(waitUntil > new Date().getTime()) {
                    // wait 3 seconds
                }
            }]]></xp:this.action>
            <xp:this.onStart><![CDATA[XSP.startAjaxLoading()]]></xp:this.onStart>
            <xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
            <xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>
        </xp:eventHandler>
    </xp:button>
    <xp:panel id="panel1">
        <xp:text
            escape="true"
            id="computedField1"
            value="#{viewScope.clickTime}"
            style="font-size:48pt">
            <xp:this.converter>
                <xp:convertDateTime type="both" />
            </xp:this.converter>
        </xp:text>
    </xp:panel>
</xp:view>

When you click the button it shows "Please wait..." for three seconds and then the time of button click.

Make sure you set refreshMode="partial" in your button's eventHandler and a valid refreshId.

回答2:

With the first option (this may require bootstrap, so OpenNTF version of Extension Library), this is a self-contained custom control that automatically hijacks any partial refresh and adds a loading mask. If you follow the link to the previous version, it gives the implementation instructions:

"Add this to a custom control and add that to your xpages to get a standby dialog on every partial refresh"

The second two links are more manual options. The onStart, onError and onComplete are properties of an EventHandler. You cannot access them from the component containing the EventHandler (e.g. Button, Edit Box etc). You need to go to the source pane, click into the EventHandler itself, which will then bring up the All Properties box of properties for the EventHandler, not the Component containing the EventHandler.

来源：https://stackoverflow.com/questions/40736251/waiting-icon-message-in-xpages

标签

xpages

ssjs