Fixing the Tooltip function in XPages #2

In a previous post I wrote about the disfunction of the tooltip after validation with the Domino server. It turns out my gigia-form has a lot of fields with visibility properties set that are calculated after partial refresh. To have tooltip fixed for the fields that become visible during interaction with the user I needed to apply another patch.

From the xsnippet for the standby control I took the first part to set up the ability to subscribe to the different partial refresh events. Then I added some lines to subscribe to the partialrefresh-complete state:

The initToolTip function did not changed:

With this subscription the tooltip becomes applied to fields that become visible after validation (when the user continues to fill in the form).

The possibility to subscribe to partialrefresh states is also a use-case for other plugins I use, for example to automatically adapt textareas to user-input.

Code for Standby Dialog cc with Abort operation

I have uploaded the code of the custom control for a Standby Dialog with Abort/Cancel operation button I wrote about yesterday to my Dropbox account. You can find the code here.

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:

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.

 

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.

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

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:

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!