Wednesday, July 4, 2018

Inform user of processing using Font awesome spinner

July 4th 2018

So, I don't use alpha five regularly anymore, but I have many topics that I could post in my blog, if someone crosses this site and this can be useful to them. So here goes another topic.

Say you have a dialog or ux whichever way you want to call it and you press the submit button and it takes some time to process the request, because you may be doing lots of stuff in the backend. In the meantime the button simply sits there and the user does not know what is happening. And by todays standards they won't sit tight, they will press the button again. Seems familiar, here is one answer to it.

Ajax callbacks to the server may take time and exactly how long it takes is a mystery. So you want to be prepared for it.
One way of doing it will be put up the message at the beginning and take it down at the end of the callback when the server tells alpha five all is good.

Here are the steps to do it.
Prepare the dialog to suit you best and then go to the properties of the dialog and select the head section tags and insert the link to font awesome cdn like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Then go to the controls and select the submit button, and on the top change the button text to
<span id = "gg">Submit</span>
You can use any identifier, I am just showing an example.
Then go to the onClick event add this line above the dialog submit action
document.getElementById("gg").innerHTML = <i class=\"fa fa-spinner fa-spin\"></i>"Processing...";
Then go to client side events and select afterAjaxcallbackComplete action and put back submit on the button like
document.getElementById("gg").innerHTML = "Submit";

Test it and see if okay with you.
Here are videos showing the same:

http://www.youtube.com/watch?v=lmGcBt71sCc
http://www.youtube.com/watch?v=orcfvpVKUJc






No comments:

Post a Comment