Responsive StandbyDialog & Cancel that operation


Fredrik Norling has posted a new XSnippet on OpenNTF for a responsive standby  widget.  Great because in my current project a) I use Bootstrap for responsive behavior b) some operations take way more time that others.

Below is a sample how the dialog looks like:


When investigating the code I noticed 2 things:

  • A typo for the bootstrap model
  • The close button does not actually cancel the operation. It just closes the dialog.

Small dialog

The typo is a quickfix. Change

 '<div class="modal-dialog modal-m"><div class="modal-content">' +


‘<div class=”modal-dialog modal-sm”><div class=”modal-content modal-content-sm”>’ +

so you use Bootstrap’s small modal and not the default large one.

Cancel the partial refresh

For the partial refresh I found the solution in a post on Sven Hasselbach’s (holy) blog. Sven also posted the solution as an XSnippet on OpenNTF.


First add a new scriptblock on the custom control that contains the Standby Dialog widget:

<xp:scriptBlock id=”scriptBlockXHRHandler”>

var xhrCall = null;

dojo.addOnLoad( function(){

/*** hijack dojo’s xhrRequest ***/
dojo._xhrPost = dojo.xhrPost;
dojo._xhrGet = dojo.xhrGet;

dojo.xhrPost = function( args ){
xhrCall = dojo._xhrPost( args );

dojo.xhrGet = function( args ){
xhrCall = dojo._xhrGet( args );

Then I included the call to the cancel function of the xhrCall object just before the allowSubmit function of the XSP object.


Now if you click the close button in the Bootstrap modal the partial refresh is aborted.standby_widget abort


Loading an indicator on a partial refresh

This post is a mix from Vince post and what is available in Declan’s fileSendr application available on OpenNTF.

So what do you need?

A JS Script Library containing the following code:

var foo;
function busyBoxON() {
foo = new dijit.DialogUnderlay({dialogId:”waitScreen”,’class’: ‘busyBox’});;

function busyBoxOFF(){

Some style definitions in a references CSS file:

div.busyBox {
background-image: url(“uploading.gif”);
background-repeat: no-repeat;
background-position: center;
background-color: black;

A funky animated gif.

And the following code under your link, button, radiobutton.. whatever:

<xp:eventHandler event=”onclick” submit=”true”refreshMode=”partial” refreshId=”meetingResults”>



Demo Notes View in Dojo Dijit.Tree

I have been prototyping trying to squeeze a Notes View into the Dojo Tree Dijit, so far so good but what I do not understand is how to invoke a partial refresh to update one or two fields with data from a document in the background?

So I guess my chances will rise if I just post an example database and people could start it to work…

Notes View

What I got so far is the Notes View in the dijit.tree. The data for the store is collected by an Agent will runs through the View using a ViewNavigator. The data is in JSON format including the universalID as UNID.

I have added also an expand and collapse functions.

tree screen 1

If you click on an item in the tree the corresponding document will be loaded in the browser.

tree screen 2

The code for loading the dijit.tree and opening a underlying document is not so exciting:

<div dojoType=”” url=”../(JSONAgent)?OpenAgent&amp;view=$v-treeview” jsid=”navigatorStore” />
<div dojoType=”dijit.Tree” id=”domJSONTree1″ store=”navigatorStore” labelAttr=”sname”>
<script type=”dojo/method” event=”onClick” args=”id”>
} else{
alert(“No doc found.”);

Instructions how to enable everything you can read here.

Partial refresh how-tp?

Instead of loading a complete new document I rather would do a partial refresh. But how? The partial refresh option is not available like for the build-in XPages controls:


Perhaps IBM could extend the controls with some groovy Dojo Dijits?

The onclick event is however available (see code) but how I could initiate there the trigger to trigger another Control that might could do the job is a mystery to me? (like in pre-XPages days you would create a button which invokes an agent and you initiate the buttonvia the _doClick way) You tell me!

For anyone wanting to help here is an upload of an example database so you can work with it… Much appreciated!