jQuery in XPages #20 – NProgress – YouTube-like slim progress bar

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.

np1

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.

np2

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.

13 thoughts on “jQuery in XPages #20 – NProgress – YouTube-like slim progress bar

  1. 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.🙂

  2. 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!

      • 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….

  3. 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($);
    });

  4. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s