In this article I will describe how to implement and use the jQuery NProgress nano scrollbar plugin
Demonstration
The XPages integration of NProgress is demonstrated here
Download
The demonstration database can be downloaded from the link above or from here
NProgress
Introduction
Since Youtube.com added their nano scroll bar at the top of the page there have been a flurry of different jQuery plugins which mimic the nano progress bar at the top of the screen.
The silly thing is that the progress bar itself does nothing useful.
- It does not
- Indicate any meaningful progress on the download of the AJAX or page
- Give any indication of the likelyhood of page download completion
- It does
- Give the user a false sense of something happening on the page
- Provide a nice User Experience for very little overhead and effort on the part of the developer
Using NProgress you can very quickly and easily add this capability to your website for only a very small overhead to the size of your application.
Adding NProgress to your XPages
- Go to the NProgress site and download the file from the github site linked on the page
- Drag and drop the contents of the zip file into your WebContents folder
- Create a sample page with the following
<link href='nprogress/support/style.css' rel='stylesheet' /> <link href='nprogress/nprogress.css' rel='stylesheet' /> <xp:this.resources> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="js/jquery.js" /> </xp:this.attributes> </xp:headTag> </xp:this.resources> <xp:this.resources> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="nprogress/nprogress.js" /> </xp:this.attributes> </xp:headTag> </xp:this.resources>
The reason we add this to our XPage in the manner above is because nprogress uses AMD as a possible loader (to integrate with require.js) and because of that Dojo 1.8 (on an R9 server) breaks it.
On my demo page I have loaded a viewPanel with 1300 documents in it – I cannot show you more because I do not want a large database on my host’s site but rest assured if you run this up to a 5000 row viewPanel the effect is better because the refresh is slower.
On the demo I have included the main example from the NProgress site and you can see that there are a number of methods for starting and manipulating the progress bar. I use start because it very nicely randomly increments itself to give that illusion of progress.
On the XPage I have a button which refreshes the view Panel – and in the client script as the button is pushed I start the NProgress. In the onComplete of the refresh I end NProgress and really it is as simple as that
<xp:button value="Reload viewPanel" id="button1" styleClass="clickMe btn btn-warning"> <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="viewwrapper" onComplete="NProgress.done()"> <xp:this.script><![CDATA[ NProgress.start() ]]></xp:this.script> </xp:eventHandler> </xp:button>
I would suggest that if you are able to integrate with Tony McGuckin’s excellent XSnippet for intercepting dojo io events you could create an automated NProgress bar should you so chose.
Conclusion
As web developers we have used spinners in our application for quite a number of years – this is a new twist on that concept and seems to be getting very good reviews from users. Consider integrating it into your applications.
Thanks for sharing, i will give it a try!
I was amazed to find out this morning the progress bar actually works in XPiNC as well – wasn’t expecting that!
The spinner not so much but that could easily be removed from the CSS. 🙂
I like it, except the “illusion of progress” would doom the implementation for us. With such widely varying bandwidth worldwide (and terribly lousy in many of our spots) it would just get people wondering why the progress bar completed and nothing happened. Cool nonetheless!
It never gets to the end….not sure i understand – sounds perfect?
Ah, didn’t realize it would NEVER get to the end. That’s awesome! We’ll have to try it.
thanks short-attention-span man 🙂
try the run and watch it – it takes forever to get even close and if your connection is *that* bad you have other issues 🙂
I could arrange for you to visit one of our sites in Afghanistan, Rwanda or the Philippines if you’d like to experience it first hand….
Great find!
The xp:headTag to work around the AMD issue still feels like kind of a hack. And it’s annoying I can’t add the JavaScript libraries to a theme/ use them with resource aggregation.
An alternative would be to remove the AMD loader from the instantiation in the JavaScript source. In the nprogress.js file that would mean commenting out the ‘else’ statement in rows 8 to 11:
} else if (typeof define === ‘function’ && define.amd) {
define([‘jquery’], function($) {
return factory($);
});
Mark I completely agree about the hack 😦
Great suggestion thanks 🙂
it seems that it does not work with IE 11. NO IDEA ???
Firefox 37.0.1 : OK
Chrome Version 41.0.2272.118 m : Ok
Chrome Version 42.0.2311.90 m : Ok
Sorry for the slow response – I just tested it in IE11 and it worked for me – http://demo.xomino.com/xomino/jQinX.nsf/xNProgress.xsp
Click the reload viewPanel button
Marky
I found!
The address of my test server was in the list of Compatibility View Sites (IE11)
Then error queryselector
I’ve removed server from list and that’s OK.
Thanks a lot !!
HA – nothing like trying to run an application as IE7 🙂
glad it works for you 🙂