Waiting icon / message in xpages

Question

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

You found relevant links with code already. Implement those in your application. If you have problems then come back here and describe your issue. We are happy to help you then. — Knut Herrmann
Thanks @KnutHerrmann I really appreciate your prompt response. Actually I don't know how to implement this I have tried a lot e.g. this is very simple example. xpagesera.blogspot.com/2012/05/… — Qaiser Abbas
How to implement this example. Where to enter this??? . Add following lines to the EventHandler of your button/link which is going to be used for Partial Update: <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> — Qaiser Abbas
@KnutHerrmann following is the error when paste above code in event handler Description Resource Path Location Type Property tag xp:this.onComplete not allowed in the property action. test.xsp HMS.nsf/XPages line 22 XPages Problem — Qaiser Abbas
Sample code - what you tried please. Edit your question. So we see you want to solve an issue, not just have someone write your code — stwissel

Knut Herrmann Knut Herrmann · Accepted Answer · 2016-11-22T20:14:54

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.

Waiting icon / message in xpages

2 Answers