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!