HTML5, CSS3, jQuery, JSON, Responsive Design...

NAB Name Picker for the Web, revisited!!

Michael Brown   October 31 2012 04:45:13 PM
My "Original" NAB Names Picker
A few years pack, I wrote a NAB Name Picker for the Web.  I say "wrote", but in fact, I was building on the considerable work of others (all credited at the time).

I was pretty pleased with it back then.  But looking at it now, all I can see is what an unholy mess of code it is.  Callback soup? Check.  Dozens of functions polluting the global namespace?  Check.  If I were to try and rewrite it now, I wouldn't know where to start!

There were also problems from a UI perspective.  For one, the dialog opens in a new browser window, and those are prone to becoming "lost" when the user clicks elsewhere on the desktop.  (Users seem to have an infinite capacity for forgetting what they had open on their desktops not ten seconds previously.)  The new window causes a different problem on mobile devices, where browser windows open full screen; in this case, you're taken out of your app completely!  Furthermore, on iOS you're limited to nine browser windows (actually, browser tabs) open at once in Mobile Safari.  What happens if the picker dialog happens to be your tenth browser tab?  The picker window will overwrite the contents of one of your existing tabs without asking you.  Nice (not).


Revisited

So, I've written a new one.  And this time, I can say "written" with hand on heart because this time it's all my own work.  Apart from all the libraries that I've used, of course, and there's a good many of those, I'm afraid!  Some of the new features:
  • I've used jQueryUI.dialog() so that the dialog (actually, just a div tag) opens on the source form rather than as a new window.
  • It uses pagination along the bottom - you know, those 1, 2, 3, 4 links etc that you get on many search engine results.  I've borrowed from Addy Osmani's Backbone Paginator project for this.  (See my previous blog post for more details.)
  • I've also tried to pay particular care to how it looks and operates on mobile devices.  On smaller devices In particular, it should resize itself dynamically to fill the viewport (browser) size, and not scroll off outside of that viewport area.  This even works if you tilt your phone from portrait to landscape mode, for example. (Note: only really tested on iOS devices.)  On bigger devices, like iPads, however, you should be able to drag the picker dialog around and resize it, just as you would on a desktop.


Desktop single picker:

Image:NAB Name Picker for the Web, revisited!!


Desktop multi picker (sorted by last name):

Image:NAB Name Picker for the Web, revisited!!


iPhone single picker:

Image:NAB Name Picker for the Web, revisited!!



Libraries

The picker app uses jQuery, jQueryUI, backbone.js, underscore.js, LAB.js and the touch-punch library for jQueryUI on mobile devices.  Phew!  Hopefully, you'll be using some, if not all, of these libraries in your own projects.  If not, then you might find it all a bit heavyweight to be loading all those libraries just to use the new picker.


Browser Versions

Requires Internet Explorer 7 or better.  By "better" I mean any browser that is not called Internet Explorer, as well as higher-numbered versions of IE itself!  

The picker makes extensive use of CSS, which is why Internet Explorer 6 is out.  I may return to this and see if there's some polyfill that might get it working on IE6.  To be honest though, I'm just about through wasting my time making stuff work on that particular rubbish.  You may also see some CSS quirks on IE7: elements visible that should be hidden, for example.  Resize the picker as a workaround for now.


Live Demo

Live demo of the new picker is at http://184.73.169.93/public/nabpickersample.nsf/pickerTest?OpenForm.


Download

The picker database and a sample app that calls it can be downloaded from the URLs below.  Documentation is in the readme.pdf file, included in the zip.

nabpickerrevisited_v0.2.zip

   
Comments

1Kevin Urbanek  10/31/2012 12:57:35 PM  NAB Name Picker for the Web, revisited!!

In the demo, I see a slight problem working with multiple pickers. On the first picker, choose the last page (goto the Z's). Then launch the second picker. the names are from the first page, but the pager is starting at the end (200's). Since the names are at the beginning of the list, I assume the pager will not display the Previous type links. I am guessing a scoped variable might be the issue.

A second question...Does Dojo offer some similar functionality to keep it on the same page or do you need to use another JS framework?

2Mike Brown  10/31/2012 3:13:14 PM  NAB Name Picker for the Web, revisited!!

@Kevin,

Thanks for the feedback. I'll look at that multiple pickers issue.

Re: Dojo, sorry, but I know absolutely nothing about Dojo.

Update 1/11/2012

I've worked around the issue. The links will switch to the first page when switching between single and multi dialog types.

3Prashant Vaikole  11/06/2013 3:53:51 PM  NAB Name Picker for the Web, revisited!!

Hi Mr. Brown,

Thanks for this amazing work. I have been trying to deploy samplepicker.nsf & nabpicker.nsf on server. But it is not loading button to populate single picker & multiple pucker. Probably due to it is not able to load all libraries.

If you can help me with this it will be great help. If you can let me know what changes i need to do after deploying in my environment

Thanks,

Prashant Vaikole

4Michael Brown  11/06/2013 11:06:33 PM  NAB Name Picker for the Web, revisited!!

@Prashant,

There's a couple of nasty, hard-coded paths that I'd left in there. I'll get that fixed when I have some time.

In the meantime, you can fix this with a couple of changes to the NAB Picker Sample database:

1) Use Designer to edit the nabpickerurl field at the top of the pickerTest form. Replace "tools" with whichever folder you've put the NAB Picker db in.

2) Use Designer to edit the app.js Script Library. There's another hard-coding, this time to the Address Book. Look for this line:

app.functions.pickerInit({dbPath: "tools/fakenames.nsf"});

Change "tools/fakenames.nsf" to just "names.nsf" (or the file name of your target Address Book).

5Prashant Vaikole  11/13/2013 10:03:58 AM  NAB Name Picker for the Web, revisited!!

Hi Mr. Brown,

Thanks a lot for your prompt help. Its working now.

Thanks & Regards,

Prashant Vaikole.

About