Hacking Servoy's AJAX Notification

Since Servoy's Web Client largely runs server-side, the AJAX notification gets triggered a lot. And Servoy's default notification...er, blows. And they don't make it easy for the developer to modify unless you know a bit of client-side javascript.

This video shows a spinner that appears at the location of the mouse and follows the mouse around if it is moved while an AJAX call is waiting to complete. MUCH better user experience.

Here is my development code for hacking in the location of our modified notification (I'm sure it will get tightened up a bit before going into production!):

(function(){
	// store last mouse click position
	$('#servoy_page').click(function(e){
	var position = [0,0];
	position[0] = (e.pageX) ? e.pageX : 0;
	position[1] = (e.pageY) ? e.pageY : 0;
	Wicket.indicatorPosition = position;
	})
})()

Wicket.showIncrementally=function(e) {
	var e=Wicket.$(e);
	if (e==null) return;
	var count=e.getAttribute("showIncrementallyCount");
	count=parseInt((count==null)?0:count);
	if (count>=0) Wicket.show(e);
	e.setAttribute("showIncrementallyCount", count+1);
	
	// set indicator to last click position
	var clickPos = Wicket.indicatorPosition;
	$('#indicator').css('top', clickPos[1] + 10).css('left', clickPos[0] + 10);
	
	// make indicator move with mouse
	$("#servoy_page").mousemove(function(event) {
		$('#indicator').css('top', event.clientY+10).css('left', event.clientX+10);
	});
}

Wicket.hideIncrementally=function(e) {
var e=Wicket.$(e);
if (e==null) return;
var count=e.getAttribute("showIncrementallyCount");
count=parseInt((count==null)?0:count-1);
if (count<=0) Wicket.hide(e);
e.setAttribute("showIncrementallyCount", count);

// turn off indicator when AJAX is done
$('#servoy_page').unbind('mousemove');
}

Not discussed in the video is how we changed the notification from Servoy's default "Loading..." text to a spinner. We used the most excellent NETEYE Activity Indicator jQuery Plugin. The following code is what we used to set up the spinner using this library:

$('#indicator').html(''); // get rid of servoy's text
$('#indicator').css('position','absolute');
$('#indicator').css('width','20px');
$('#indicator').css('height','20px');
$('#indicator').css('z-index','1000'); // make sure it shows above everything else
$('#indicator').activity({segments: 12, align: 'left', valign: 'top', steps: 3, width:2, space: 1, length: 3, color: '#C70108', speed: 1.5}); // indicator configuration

Note that there are several permanent ways of including client-side javascript with Servoy's Web Client. In the MainPage.html web client template, insert server-side with the Web Client Utils plugin, or in your custom wrapper if you're running Servoy Web Client in an iFrame.