Responsive StandbyDialog & Cancel that operation

Introduction

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:

standby_widget

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">' +

into

‘<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.

Scriptblock

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

<xp:scriptBlock id=”scriptBlockXHRHandler”>
<xp:this.value><![CDATA[

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 );
}
});
]]>
</xp:this.value>
</xp:scriptBlock>

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

xhrCall.cancel();
XSP.allowSubmit();

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:

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

function busyBoxOFF(){
foo.hide();
}

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”>
<xp:this.script><![CDATA[busyBoxON();]]></xp:this.script>
<xp:this.onComplete><![CDATA[busyBoxOFF();]]></xp:this.onComplete>
</xp:eventHandler>

 

 

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=”dojo.data.ItemFileReadStore” 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”>
if(id){
window.location=navigatorStore.getValue(id,”unid”)+”?OpenDocument”;
} else{
alert(“No doc found.”);
}
</script>
</div>
</div>

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:

partialrefresh

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!