Page 1 of 1

Overriding Servoy's default Loading... Ajax message

PostPosted: Thu May 09, 2013 7:25 pm
by sbutler
I had a client that really didn't like the "Loading..." in the upper right. Some users don't notice it, and they think the screen is frozen. There is the busy plugin, but as you all know, sometimes its a pain to run all functions through the busy plugin. So, below is a simple example of how to change the Loading... to something different. This shows how to change the message, and the location. In this example, we change "Loading..." to an animated spinner gif, and move it to the center of the screen. This works by adjusting the SPAN element that Servoy uses, so Servoy takes care of hiding and showing it.

Written in Servoy 6
Requires the WebClientUtils plugin
Code: Select all
var js = 'function centerElem(elem) {\
       var parent = window;\
       elem.css({\
          "background-color": "transparent",\
           "position": "absolute",\
           "top": ((($(parent).height() - elem.outerHeight()) / 2) + $(parent).scrollTop() + "px"),\
           "left": ((($(parent).width() - elem.outerWidth()) / 2) + $(parent).scrollLeft() + "px")\
       });\
   }\
   centerElem($("#indicator"));\
   $("#indicator").html("<img src=\'http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif\' />");'
   plugins.WebClientUtils.executeClientSideJS(js)

Note: for simplicity the code references the ajax-loader.gif on another website, but in your real code you should download the gif and host it in your Servoy ROOT/images directory, and modify the reference appropriately (/images/ajax-loader.gif).

Here is an example, as you can see the spinner in the middle of the screen.
Image

In my solution setup, I generally only have one main form which contains tab panels, and I swab forms in and out of the tab panels in the navigation framework (so I never change the main form). So, in my case I only have to run this code once, onSolutionOpen. If you switch main forms, you may need to run it multiple times, or find a different approach (I haven't tried it with other types of navigation)

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Thu May 09, 2013 7:41 pm
by sbutler
Also, I've considered including something like this in the Busy plugin. Something like below:

plugins.busy.overrideLoadingMessage(pathToImageOrText, shouldCenter)

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Thu May 09, 2013 8:45 pm
by david
Data Sutra's latest "busy" blocker:

loading.png
loading.png (339.15 KiB) Viewed 13848 times


Two demo servers to try it out on:

http://demo.data-sutra.com
http://europe.data-sutra.com

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Fri May 10, 2013 12:33 pm
by Kahuna
Excellent thanks Scott!

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Thu Jun 27, 2013 3:50 pm
by bobcusick1332964082
Scott,

WHOA! This is simply AWESOME! Thanks so much for sharing this! It should be the default... :D

Bob

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Thu Jun 27, 2013 5:36 pm
by pbakker
Good news for you Bob: it is...

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Fri Jun 28, 2013 12:48 pm
by pbakker
Some clarification: as of Servoy 7.1 the setting "servoy.webclient.blockinputonrequest" is enabled by default and shows a loading cursor instead of a loading indicator while communication with the server is taking place.

See SVY-4036 - replace "loading..." indicator with busy cursor

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Fri Jun 28, 2013 6:28 pm
by bobcusick1332964082
Paul,

That's really great! It's those "little" touches that make a HUGE difference in the product!

NICE WORK! :D

Bob

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Fri Jun 28, 2013 6:33 pm
by bobcusick1332964082
Paul,

Is this only when deployed on the application server? I'm still seeing the "Loading..." message (7.1.0). When I run the code above at startup, then it DOES have a spinner... is that maybe in an up-coming build or am I just doing it wrong? :wink:

Re: Overriding Servoy's default Loading... Ajax message

PostPosted: Tue Jul 02, 2013 8:30 am
by jcarlos
In the example of Scott, in his code, he changes "Loading..." to the animated spinner gif from NASA (ajax-loader.gif). I supposed you can use instead any other image (such as the one that David is using for the CMS).

My question: does Servoy allows -or makes it easy for developers- the use of another image than the loading cursor that is now the default? Is it Servoy's approach as flexible as the example code from Scott?

Thanks, Carlos