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

New NAB Name Picker for the Web

Michael Brown   December 8 2009 05:30:00 PM

Update 31/10/2012

I recently rewrote the NAB Name Picker from the ground up, so you may want to check that new version in preference to the one detailed below.  I'll leave this one in place for historical reference, however.



Unbelievably, there's still no NAB name picker for the web in Domino 8.5x; not even using xPages.  Until IBM sorts that out, we're left to devise our own.

The one included here builds on the excellent work of Scott Good and Ben Duboc.  All credit to Scott for coming up with the original.  Their web NAB picker easily the best that I've seen, but there were a few things about it that I thought I could improve, and here they are.


First or Last Name Sorting

The original sorts by first name only.  I've added a radio button to let you sort by last name too.  I've also changed the info that's displayed so you get to see the full Notes Name instead of the original's first name, last name and middle name arrangement.  I think this is essential for multi-domain NABs.

Single name NAB Picker sorted by first name


Single name NAB Picker sorted by last name

(Click on either image to go to a live demo.)

Resizeable

The original version had a fixed size; you could resize the dialog, but the data table remained fixed in size.  My one is dynamically resizeable.  Here's how it looks after I dragged it to a bigger size.

Single name NAB Picker after resizing

All this is for the multi-name version as well:
Multi name NAB Picker after resizing


Back end - JSON & JQuery

JSON is the big coming thing for Ajax.  If you don't know it, time to learn!  Basically, it allows you exchange data in a format that JavaScript understands natively.  So, no more laborious code to translate JavaScript variables into XML and back again.  I managed to shorten the back end code a fair bit by using JSON.

And you get all this goodness for free.  No need to change any views on your NABs.  The code makes use of the "OutputFormat=JSON" parameter of the ReadViewEntries command.  It was introduced in Domino 7.02, so you won't find this parameter documented in in the Designer Help for version 7.  It is documented in the version 8 Designer Help though, so it's safe to use.

The JQuery JavaScript library is also very neat.  It doesn't really give you anything that you can't do in other ways, but it does simplify a lot of stuff that's a pain to write out in full.  It's particularly good for Ajax queries, as its name suggests.  It's also excellent at resolving cross-browser issues, which is how I came to use it here

Once I'd decided to add a dynamic resizing feature to the dialogs, I then needed to interrogate the dialog's current size.  Wouldn't you just know that Firefox and IE do this in completely different ways?  Firefox uses the window.innerHeight property, whereas IE does Lord knows what.  Using JQuery, I could just write:

$(window).height()

and I was sorted for any browser.

Once I'd made that decision, I decided to use JQuery to do the Ajax calls and much of the HTML tag handling.  If you don't want to use JQuery, I've left the native Ajax calls in there too.  You just need to uncomment them.  You're on your own resolving the browser height problem though!



Help yourself to the sample database from here:

nabpickerjson_nsf.zip

You'll need to copy all the design elements into your own application.  Namely:
  • One or both of the "NAB Picker" forms, depending upon whether you require a single name or mult name picker.
  • The (WebNABQO) agent
  • The JQuery.js page.  NB: if you already have a JQuery library in your organisation, then you won't need this.  In that case, you will need to modify the HTML Header on the two "NAB Picker" forms, so that the script tag includes your own JQuery library instead of the one I've embedded in this application.

The pickerTest form gives you examples of how to call the dialogs.
Comments

1Ian Randall  12/08/2009 1:21:48 AM  New NAB Name Picker for the Web

We have also adapted Scotts original code to look-up an Employee database and have extended the search to search by First Name, Last Name, Alias, Job Title and also by Organization.

The latter option (By Organization) provides a filtered search by First name or Last Name, which first filters by Organization structure levels such as by Country, Region, Division etc. This dramatically cuts down the size of the search where you have losts of similar names. For example, one of our clients in the middle east has tens of thousands of staff who's first name or last named is Mohammed (with a variety of different but very similar spellings) . Providing searches by Alias comes in really handy in this situation.

The base code scales really well and easily handles hundreds or thousands of names and works well with as different web browsers.

I agree that Lotus could do worse than adopting this as a standard Web based NAB picker.

Ian

2Scott Good  12/08/2009 7:40:07 AM  New NAB Name Picker for the Web

Michael,

Nice work. Thanks for taking the ball and bringing this thing up to date under the covers. In your very nice write-up you neglected to mention Matt White whose work I stole, er, BUILT ON to come up with mine. He did all the heavy lifting, I mostly made the UI look nicer.

Speaking of which, our collective UI is starting to look a little dated. When I get a few minutes I'll see if I can't pretty it up a bit.

Finally, since you're already using jQuery, have you thought about adding the Thickbox functionality to get it out of its separate window? We did a little with this on some of our own stuff...might be worth thinking about.

Nice work. Cheers!

Scott

3Ben Dubuc  12/08/2009 11:50:49 AM  New NAB Name Picker for the Web

As Scott mentionned, it is great to see someone is still keeping this thing up to date!

I have used this one in many applications and it is really great! I will download your version and use it instead of the "old" version.

And thanks for the credit, but I merely tested Scott's code a lot and fixed a few things. Bu this is how the Yellow people bleed: share, share share!!!

Keep up the good work,

Ben

4Mike Brown  12/08/2009 3:58:32 PM  New NAB Name Picker for the Web

@Scott and @Ben,

Thanks for your comments, guys.

Thanks for the tip on Thickbox, Scott. I'd not heard of that before, but have just had a quick look at:

{ Link }

I can see how the modality thing fits: i.e., it would stop users opening web dialogs and then losing them. However, none of the example Thickbox dialogs shown on that site are resizable, and that's something that I wouldn't want to lose.

5Lokesh  12/24/2009 2:26:29 PM  New NAB Name Picker for the Web

Hi Michael,

Thanks for the tool and it is very helpful tool. I am trying to implement in one of my LN form. I copied all of the objects from your database to mine. When I open up your test form, i can select the names and it store the name in designated field. When I tried to do the same in my form I get an error message in IE (Ver 6.0.290) "There has been an error returning the selected values: Access is denied". I get this error only in my IE, I tried in one of my friend's machine and it worked for him. I tried the same form in Firefox and it works too. Not sure how i can troubleshoot this issue. Can you please let me know how i can resolve this issue?

Thank You

- Lokesh

6Mike Brown  12/24/2009 4:45:01 PM  New NAB Name Picker for the Web

@Lokesh,

Sorry, I've not seen that error so I can't troubleshoot it for you.

Perhaps it's your IE security setting being set a bit too high? Check those settings against a working version on another PC and see if there are any differences.

Cheers,

- Mike

7Leonard Wooling  02/11/2010 6:41:37 PM  New NAB Name Picker for the Web

Hi.

I have been able to add your functionality into an application I'm building on IE 6.

However, I can only get the code to open the dialog window when I am working with a brand new document.

When I click the same button on an existing document, I get a 404 error message:

HTTP Web Server: Lotus Notes Exception - Entry not found in index

Any suggestions for how to resolve this? The only 'workaround' that I can think of would be to pop up a small window (which would always be a new document) and call your code from there.

Thanks in advance!

Leonard

8Mike Brown  02/12/2010 1:55:55 AM  New NAB Name Picker for the Web

Not aware of any such problem, Leonard. So, I've no idea what the cause might be.

Your "existing document" is in Edit Mode when you click the button, yes?

9Leonard Wooling  02/12/2010 10:08:09 AM  New NAB Name Picker for the Web

Yes, it is in edit mode.

When the document is 1st created, the URL ends with FORMNAME?OpenForm.

Once the document has been saved, the URL then changes so that the URL has the ViewName/DocumentUniqueID?EditDocument

As I mentioned before, I think I can just use a pop-up window which will work-it will be just one additional click.

Regardless, this is an awesome piece of code!!!!!

Leonard

10Mike Brown  02/12/2010 3:04:02 PM  New NAB Name Picker for the Web

It really shouldn't make any difference, Leonard.

If you email me your DB, I will take a look.

11James Kelley  04/29/2010 2:41:19 PM  New NAB Name Picker for the Web

To stop issue when active X is disabled in the browser replace the following line:

return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

with this code:

var xhr;

try {

xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE with ActiveX enabled

} catch(ex) {

xhr = new XMLHttpRequest(); //IE7+ with ActiveX disabled and Non-IE

}

Love the address dialog ... keep up the good work!!

12Mike Brown  04/29/2010 5:04:28 PM  New NAB Name Picker for the Web

Thanks, James.

FYI, that line is actually the jQuery library. The full call is like this:

// Create the request object

// Microsoft failed to properly implement the XMLHttpRequest in IE7

// so we use the ActiveXObject when it is available

// This function can be overriden by calling jQuery.ajaxSetup

xhr:function(){

return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

}

However, that was in jQuery 1.3.2, which was the latest version available at the time I rewrote the dialog code. We're now up to jQuery 1.4.2 and the equivalent code looks like this:

// Create the request object; Microsoft failed to properly

// implement the XMLHttpRequest in IE7 (can't request local files),

// so we use the ActiveXObject when it is available

// This function can be overriden by calling jQuery.ajaxSetup

xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?

function() {

return new window.XMLHttpRequest();

} :

function() {

try {

return new window.ActiveXObject("Microsoft.XMLHTTP");

} catch(e) {}

}

I haven't tested it yet, but I'm guessing that this issue might have been fixed by this change. I'll test it when I've got some time and add it to the main post if it does.

13Leonard Wooling  08/30/2010 10:17:20 PM  New NAB Name Picker for the Web

How about handling names with an apostrophe in them?

Like Mike O'Brien?

I am working with an address book of almost 40,000 users - and currently have at least 30 users with an apostrophe in their name.

Using the type-ahead, I can get to the page that has their names, but the code won't allow me to select any names.

14Mike Brown  08/31/2010 7:28:24 PM  New NAB Name Picker for the Web

Oops!

I can't believe that I missed the apostrophe/JavaScript problem, especially as it's one that I've already posted about in this blog { Link }

I've afraid that I don't have time to fix it at the moment, but I can give you some clues as where to look.

You'll need to escape - i.e. put a backslash in front of the apostrophes - at some point, and possible do the reverse at others. Here's a couple of JavaScript functions to help you:

//replace substring

function replaceSubstring(exp, str, wit) { return exp.split(str).join(wit); }

//formats apostrpohe with escaspe character

function formatApostopheWithEscapeChar(sourceString) {

return(replaceSubstring(sourceString, '\'', '\\\''));

}

I think the displayDataJSON function is one place where you'll need add this function. Try changing this line:

fullName = JSONDataObj.viewentry.entrydata[fullNameIndex].text[0];

to this:

fullName = formatApostopheWithEscapeChar(JSONDataObj.viewentry.entrydata[fullNameIndex].text[0]);

There may be some other places where you need to make similar changes. Firebug is your friend.

Please post any changes that you make to fix this so I can update my design when I have some spare time.

15Eric  11/16/2010 2:38:03 AM  New NAB Name Picker for the Web

Hi Brown,

First, thanks for your effort ! It is a nice name picker. I want to use the name picker with xpage. But meet a problem and wish you can help me. It is about how xpage cowork with form. I abbreviate the question as follows,

I have a xpage with a text control named "inputname" and a button. If I click the button, it will popup a window with a text field named "name" and a button. I want to return the "name" field value to "inputname".I write the code to the button on the popup window.

window.opener.document.getElementById("#{id:inputname}").value = window.document.forms[0].name.value

But it returns "is null or not an object".

16David  05/05/2011 6:00:26 AM  New NAB Name Picker for the Web

Thank you for updating this. I've been using the original for some time but these little tweaks have really improved it.

Thanks again.

17Curtis  05/05/2011 11:34:14 AM  New NAB Name Picker for the Web

@Leonard re: HTTP Web Server: Lotus Notes Exception - Entry not found in index

If the form that is calling the pop-up window is not at the root of the database, you may need to alter the url referenced in the getMultiNameJSON and getSingleNameJSON functions.

Hope that helps if others are getting this error.

18Hughes  06/29/2011 9:39:50 AM  New NAB Name Picker for the Web

Hi

very nice work , it works with domino web, but i have the same problem related by Eric.

It doesn't work with xPages.

It seems it concerns the link between the field ID and javascript.

.

The field ID is generated by Xpages and the javascript search the id (getelementbyid) and not the generated one.

the nab web page opens but there is an "there is an error loading the start data") and of course the field is not filled.

thanks for your suggestion

19Mike Brown  06/30/2011 6:53:26 PM  New NAB Name Picker for the Web

@15 and @18

Sorry, guys, but I don't know xPages at all, but I'll offer some help based on what you've said above.

The problem seems to be that you can't control the field ID that's generated by xPages, is that right? If so, then you need to get the field by its Name attribute rather than its ID attribute. This is easy enough to in jQuery (which you can use because it's a requirement for the NAB Picker anyway).

Here's the jQuery syntax to do that:

var myValue = ("[name='myFieldName']).val(); // to read it

$("[name='myFieldName']).val(newValue); // to set it

The above won't work for Radio or Checkbox fields, however. They're more complicated in HTML because each possible value is treated as a separate design element, each of which can have a separate ID attribute, but with a shared Name attribute. (So you *have* to use the Name attribute, in fact.) Here's the syntax for Radio/Checkbox fields then:

var myValue = ("[name='myFieldName']:checked).val(); // to read it

$('input:radio[name="rbLim"]').filter('[value="' + newvalue + '"]').attr('checked', true); // to set it

20Jon Antalvari  10/03/2011 12:58:34 PM  New NAB Name Picker for the Web

Fabulous. Thank you. Thank you. Thank you. I have tried numerous things and finally happened upon your blog. This is so great. I appreciate the help very much!!!!

21Andrew Donald  05/08/2012 6:26:29 AM  New NAB Name Picker for the Web

I downloaded, unzipped, and saved the database to my dev server. Then I opened the pickerTest form and, what-a you know, an error 500 error was returned.

I have NEVER EVER managed to download ANY example database from the internet and got it work first time. There is always some caveat.

So, where do I go from here?

22Mike Brown  05/08/2012 7:34:18 AM  New NAB Name Picker for the Web

Error 500, is it?

Ahh, I think you need to upgrade to the Pro version. Send me your credit card details and I'll arrange a licence for you.

Alternatively, you could post your problem again, but include more facts and less attitude...

23Andrew Donald  05/08/2012 8:12:41 AM  New NAB Name Picker for the Web

Getting "Problem retrieving XML data:Not found"

and

<HTML><HEAD><TITLE>Unable to Process Request</TITLE></HEAD><BODY><P>Http Status Code: 404</P><P>Reason: File not found or unable to read file</P></BODY></HTML>

24Orlando Chacon  09/19/2012 10:21:41 AM  New NAB Name Picker for the Web

Mr. Brown,

That's gotta be the best darn name picker I've ever seen. Kudos to all the developers on this. Been doing web development in Domino for over a decade and it truly rocks.... I am having a silly issue though, I've deployed it in an enterprise environment and even after getting the design signed by ECL authorized admin. Each time the name picker dialog pops open it challenges me for another login. Mind you I've already authenticated to access my app. Any suggestions? Thanks in advance...

25Prashant Vaikole  11/01/2013 3:53:45 PM  New NAB Name Picker for the Web

Mr. Brown,

Thanks a lot for sharing this component and indeed its very helpful since people do have some different preferred name where as Notes abbreviated name ( email address ) is different. I have tried to leverage the same component and it does give sometime unexpected behavior. I have been getting below error.

Please check and suggest if you have got the same error in past and did some fix for the same.

Message: Expected ')'

Line: 1

Char: 19

Code: 0

URI: { Link }

Message: Expected ')'

Line: 1

Char: 19

Code: 0

Thanks for all your help!!

Regards,

Prashant Vaikole

26Prashant Vaikole  11/01/2013 4:02:50 PM  New NAB Name Picker for the Web

Mr. Brown,

To be specific, I am only getting this error when try to open application on IE 8 and it is sometimes only not always. and there is not particular pattern found. As soon as I start typing character, i do get this error message.

Thanks again !

27Mike Brown  11/02/2013 2:09:48 AM  New NAB Name Picker for the Web

Sorry, Prashant. I've no idea what's causing that.

You might want to try my "revisited" version of the Web NAB picker and see if your problem happens with that. There's a link to it at the top of the post.

28Prashant Vaikole  11/05/2013 10:00:57 AM  New NAB Name Picker for the Web

Hi Mr. Brown,

Thanks for your time. I will check revisited version as suggested.

Regards,

Prashant Vaikole

About