Skip Navigation
Details
Author: Jake Howlett
Date: Thu 21 Feb 2008

Permalink

Comments / Add / Subscribe

« OutputFormat=JSON - The Method in the Madness | Blogs | Determine if a Document Belongs in a Given View When Saving »

Facebook-Style Name Picker for Domino

You're hard to please, you lot. Especially as I never really know exactly what it is you want.

Yesterday was a good example. It was an obscure topic and more of a curiosity of a solution than anything else, but I still wasn't sure how well it would go down. As it turns out there didn't appear to be many takers, which wasn't a surprise really and I'm not that bothered really. Chances are it will come in useful for somebody at some point. At least it should reinforce the idea that anything's possible.

Every now and then though I chance upon something I just know you're all going to love!

As soon as I saw the Facebook Style Input Box on Ajaxian last week I just knew there had to be a Domino version that worked with a standard Domino Directory. Could this be the ultimate solution to the web NAB name picker we've all been looking for?

After a lot of hacking to get it to work with Domino, here's what it looks like as it chooses names from the Fake Names Directory:

How cool is that!? You can play with it here.

The more I play with it the more I love it. It just keeps on surprising. You can choose, select and remove names all with the keyboard. Try picking names and then removing them using the backspace key. Notice how the input box (i.e. the field) grows as the choice of names does. Brilliant.

That said, I don't know if I would/will actually ever use it unless a client asked for it or a requirement was crying out for it. Still, it's very nice all the same and I enjoyed the "hacking" required if nothing else. This is just me standing on the shoulders of giants though, so thank me by all means, but don't praise me for it.

You can download a copy here. To point it to your own Directory change the setting in the JS Header of the Test form.

Next post here will be me talking about what was needed to get it to work with Domino. It may well be something of a rant.

Comments

Richard Shergold (Thu 21 Feb 2008 03:52 AM)

Very nice Jake - thanks (as always!)

Jens Polster (Thu 21 Feb 2008 04:14 AM) website / e-mail

Thanks, Jake - great work!

Stein Sebak (Thu 21 Feb 2008 04:15 AM)

That's cool - but it doesn't seem to work in firefox ...

Per Gref (Thu 21 Feb 2008 04:24 AM) website / e-mail

I never saw the Facebook one but this is very neat!

Prototype/yours allows click-to-select and then use Delete on keyboard, whilst the Mootool one allows insertion between existing entries.

Spichal (Thu 21 Feb 2008 05:16 AM)

@Stein Sebak :

Works fine in my Firefox (2.0.0.12).

veer (Thu 21 Feb 2008 07:44 AM)

Works for me in FF too same version as mentioned above.

Looks great Jake. I was exploring your earlier solution of Name Picker a month or so back and realized that it can't access multiple address books.

Now, That would be awesome.

Jake Howlett (Thu 21 Feb 2008 08:00 AM)

"it can't access multiple address books"

As my parents used to tell me all the time - there's no such word as can't.

What you mean is, it *doesn't* access multiple address books.

Jake

Karen Demerly (Thu 21 Feb 2008 08:30 AM) e-mail

hmm... not working in my version of Firefox 2.0.0.12

Karen Demerly (Thu 21 Feb 2008 08:32 AM)

But when I went back, it did. Something must be taking a bit of time to work.

Jake Howlett (Thu 21 Feb 2008 08:33 AM)

Come on guys I need more detail than "not working" if you want me to fix it for you. What isn't working? Have you looked with Firebug's console to see what's going on? Is there any Ajax happenings? Any JavaScript errors reported? etc.

Richard C (Thu 21 Feb 2008 09:17 AM)

"Not working" is probably do with the FakeNames.nsf requiring Java and the browsers may not have it enabled ...

I have it enabled, but am behind the company's firewall and I refused to let it connect to the internet. Results - browser had to be killed (via task manager) as links weren't working ...

Jake, you might have to put the warning message re Java in the post above ...

Axel (Thu 21 Feb 2008 09:19 AM) e-mail

Hi,

looks great. Found something which looks like a bug.

1. I type in aar all this Aaron names appear (nice)

2. Then I hit 3 times back space (field is empty)

3. Then I type ac . After typing the c the drop down is empty (not nice). But there are names in fakenames like Acevedo. Don't know the code.

Jake Howlett (Thu 21 Feb 2008 09:36 AM)

Richard. Java only comes in to it if you follow the link to the Fake Names NAB on the demo form and there is a warning there. I don't think that's what they mean when they say it's not working.

Axel. Acevedo is only in there as a last name. Not a first name, which is what this name pickers is looking for.

Richard C (Thu 21 Feb 2008 12:31 PM)

Jake, I'm talking about the link that you have above the image on this posting. "..., choosing names from the Fake Names Directory:"

Alastair Grant (Thu 21 Feb 2008 01:11 PM)

Jake, Excellent work!.. thanks, Alastair

Matjaz Slak (Thu 21 Feb 2008 02:23 PM) website / e-mail

Jake, you're a life-saver! :)

I saw the original mootools version and thought "perfect for my quickr app!" only to find out that mootools and quickr's Dojo libraries can not coexist.

I was not aware of the prototype version - and guess what - it looks like it's working.

Again, a big THANK YOU!

mdmadph (Thu 21 Feb 2008 02:30 PM) website / e-mail

...uh, how long has "outputJSON" been around? And why is this the first time I've ever heard of it...?

mdmadph (Thu 21 Feb 2008 02:31 PM) website / e-mail

well, outputFormat=JSON -- you know what I meant. :P

Jake Howlett (Thu 21 Feb 2008 03:00 PM)

Richard. Good point. I can kind of see why people might fall for that. Because they're not reading properly ;o) Sorted now.

mdmalph. Becuase Lotus have always been really good at making the most useful of all new features as undocumented as possible.

Chr K (Thu 21 Feb 2008 03:42 PM)

lol

Jake, you are so right about Lotus.

To get to know the product we all have to keep on reading Codestore. - Thank you so much!

mdmadph (Thu 21 Feb 2008 04:14 PM) website / e-mail

Jake: seriously. I don't think I've ever been as excited/pissed-off as this in a long time.

It works great for me, but now I've got to go through all my old code and see what I can optimize by using "outputFormat=JSON' -- on second though, forget about it.

I think I've found the reason for the over-engineered JSON, though I could be way off on this -- it allows for any previous XPath-like data readers (like ones that I've coded in ExtJS for plain Domino-server XML) to work simultaneously with JSON, as well. It's actually pretty neat -- there's not much re-coding I have to do at all.

Jake Howlett (Thu 21 Feb 2008 04:40 PM)

mdmalph. At first I too thought the JSON looked like that so that it was just like the XML we're all used to. Then you look closer and realise there are startling differences. More on it later but in XML there are multiple viewentry nodes each with multiple entrydata nodes. In JSON there's one viewentry and one entrydata. Go figure.

mdmadph (Thu 21 Feb 2008 05:26 PM) website / e-mail

Aye, but that's the thing -- JSON doesn't have multiple nodes of the same identifier, just the array that's at that point.

When stepping through the data, all you do is change your XPath query from something like:

"entrydata[@columnnumber=" + num + "] > text"

To:

"entrydata[" + num + "].text[0]"

And you're all set! And I just did that with a quick if/then in my metadata constructor.

Still, though -- I would've loved to have known about this months ago while wrangling with XML...

Tanny O'Haley (Thu 21 Feb 2008 06:18 PM) website / e-mail

Jake,

This is very cool and at the same time, really chatty in that there is a whole bunch of network traffic. Could the code be changed to use a timer instead of keydown to look at the input field like Google suggest?

I did this last year, but mine is a single select and doesn't require the 103kb prototype library. I haven't written a blog post about it yet, but you can see it in action at:

{Link}

It also uses the fakenames directory.

MaryBeth Raven (Thu 21 Feb 2008 10:39 PM) e-mail

Jake,

This sentence you have at the top of the post:

You're hard to please, you lot. Especially as I never really know exactly what it is you want.

I sooo agreee!! at least you gave them something they seem to like today!

Mary "I canot please all of you all the time so that is what we have so many damm preference" Beth

Jake Howlett (Fri 22 Feb 2008 03:33 AM)

Tanny. I thought that too, but didn't feel like delving that deep in to the code. It could be that it's a config option that I've overlooked.

mdmalph. That makes a little more sense. But if you forget all about the XML then the JSON itself makes no sense at all. Least not to me. Each time I have to use Domino-generated JSON I have to re-learn where to expect things to be. Having a single entrydata makes sense to me (more so than multiple entrydata nodes in XML, which doesn't), but the whole idea of there being *one* viewentry trips me up every time. More in-depth rant to come.

Jake

Niel (Fri 22 Feb 2008 10:31 AM)

Very cool. I did notice that it allows duplicate entries to be made.

mdmadph (Fri 22 Feb 2008 10:38 AM) website / e-mail

@Tanny: There sure is -- I don't know how to do it in Prototype, but I'm sure it can't be too different from the Ext way (a simple "queryDelay" param in your select object config).

@Jake: I had just thought that multiple data nodes of the same tag was just the way it was done in XML -- isn't that what "getElementsByTagName()" is for?

mark (Sun 24 Feb 2008 08:48 PM) e-mail

Hi Jake,

The demo looks really good! Could this easily be ammended / made to work on just a view/list of locations (towns and cities). I have a need for a field where someone can enter the first few letters of a town and a list of towns matching those letters appear in the drop-down for selection. I would only want 1 town to be selected, not multiple.

Cheers

Mark

Jake Howlett (Mon 25 Feb 2008 03:07 AM)

It could be easily amended Mark, but I wouldn't choose this one if you only want single choices.

Salva (Mon 25 Feb 2008 03:16 AM)

Hi Jake,

If I were to implement it, I would only change one thing: I would call an agent that made an ftsearch in the addressbook and printed a "smaller" JSON.

The agent wouldn't need to be in the names database (you don't need to modify the standard design), and doing it this way means you wouldn't be limited to searching names that start with the typed string (quite handy if you want to search someone by surname, for example). Also, the JSON would be smaller and have the format you wanted.

The only thing, being an agent, you would need to make sure the server can execute more than one agent at the same time.

Jerry Carter (Mon 25 Feb 2008 12:19 PM) website / e-mail

Very Nice Jake!

Jack Ratcliff (Wed 27 Feb 2008 12:30 AM) website / e-mail

Jake, great as always! Now when are you coming back to help on Ext.nd? :)

Lisa (Thu 28 Feb 2008 11:21 AM) website / e-mail

Hi Jake et All,

To begin, Jake congratulations on the well deserved Blogger award. I also want to compliment you on the FaceBook Picker - what a sensational tool! And now, I am trying to apply to a real world application that allows users to select multiple products instead of people from a list of roughly 1500 products. I have the picker grabbing the product name from a view that mimics ($VIMPeople) with 4 columns. Right now, my test columns are as follows:

column1 = ProductName + "-Full" 'this is FullName in ($VIMPeople)

column2 = ProductName + "-First" 'this is FirstName in ($VIMPeople)

column3 = "" 'this is MiddleName in ($VIMPeople)

column4 = ProductName + "-Last" 'this is LastName in ($VIMPeople)

This works like a charm and the user gets the values to select as "ProductName-First ProductName-Last" just like they should. Where I am running into trouble is eliminating the 'extra' unnecessary columns so that I can search & display just the ProductName-Full to the user. I have tried looking at the file protoculous-effects-shrinkvars.js, but unfortunately it opens as one big block of code rather than formatted code -- I am not sure if this is even the correct place to be looking, but would you mind posting the file as formatted code?

Admittedly, Domino on the web is not my strongest suit *yet* and I hope what I am posting makes sense to you. Any advice that will point me in the right direction on this would be appreciated.

Many Thanks,

Lisa

Jake Howlett (Fri 29 Feb 2008 04:11 AM)

Hi Lisa,

If you're not a web developer then you're throwing yourself in at the deep end here.

Forget the prototype file. You need to look at the script libraries. Even then you'd have a job working it out if JavaScript ain't your thing. If you want to learn though it would be a good exercise to start with.

It is possible to do what you want to do. If that helps ;o)

Jake

Jerome (Wed 5 Mar 2008 05:18 AM) e-mail

Hi,

The JSON format don't work fine in my Domino version (6.55 french).

When I tried to access the view in this format, I've the same result as in XML format ...

Is anybody please help me ?

Jake Howlett (Wed 5 Mar 2008 05:29 AM)

Jerome - you need version 7.0.2 to use JSON

Jerome (Wed 5 Mar 2008 10:09 AM) e-mail

Thanks Jake,

Is there an other way to do the same thing as your "facebook-style name picker" in v6.55 without JSON ?

Perhaps simply with XML OutputFormat ?

Jerome

Atul (Thu 6 Mar 2008 10:58 AM) e-mail

Thanks Jake,

what parameter/script change required to work with Last Name search instead of First Name.

Davez (Fri 7 Mar 2008 11:06 AM) e-mail

Hi all

I'm trying to make this facebook style but it doesn't work.

I need to know what exactly have to chance, only the Jheader in test form???? or maybe i have to chance something in the js libraries.

Tks

Lisa (Mon 17 Mar 2008 04:44 PM) website / e-mail

Hi Jake, et al,

My apologies for not posting this sooner. I was side tracked and had to put applying facebook names to a products list aside in lieu of more pressing client work. However with your nudge in the right direction in previous post, I did get this to work with Products instead of Names.

1. By changing the test form js header FROM {fetchFile:'/fakenames.nsf/($VIMPeople)'} TO my view {fetchFile:'/SFA/Products.nsf/ProductNameLU'}

2. And changing line of code below in the test.js script library to work with my 2 column view

//tmpJSON="{'caption':'"+t.entrydata[1].text[0]+" "+t.entrydata[3].text[0]+"', 'value': '"+t.entrydata[0].text[0]+"'}"; //Search string on 4 columns

tmpJSON="{'caption':'"+t.entrydata[0].text[0]+"', 'value': '"+t.entrydata[0].text[0]+"'}"; //Search on one column in my view

However, there does seem to be a caveat with IE7 caching. When I edit the form after it has been saved I get flukey results. Below are the steps I took in my testing.

1. Create doc & pick Nelson Cooley, Robin Cash, Josh Bacon, Save & Close Doc

2. Open doc to edit, Nelson Cooley, Robin Cash, Josh Bacon are in the field as expected

3. Remove Nelson Cooley, Save & Close Doc

4. In Read Mode the doc shows Robin Cash, Josh Bacon as expected

5. Open doc in edit mode again and values in field are *Nelson Cooley*, Robin Cash, Josh Bacon are all in field even though Nelson Cooley was removed in step 3

So again, Jake, I am seeking your advice. Mind giving me another nudge right direction to make this work in IE7 as well as it works in IE6 & FF? OR should I stick to using this on one-time submit forms that do not need edited?

Many Thanks,

Lisa

Michael Hunter (Mon 7 Apr 2008 09:40 AM) e-mail

Hi Jake - loving this!

One problem I noticed with it in IE6, after typing in the first name and pressing return to select it, the first character of the next name typed isn't recognised. Any ideas how I can fix this? Works ok if you select the first name via a mouse click, but not if you select the first name via pressing return! Just looking through the code to see if I can spot the problem, but wondered if you'd know.

If I spot the problem in the meantime, I'll post back again. Thanks,

Mike.

Shawn Johnson (Wed 23 Apr 2008 09:50 AM) website / e-mail

I can't seemed to get this to work. I am not getting any javascript errors. I am using firefox 2.0.0.14 and IE 6.00.29, I am not getting anything to follow up on, does anyone have any idea where i can look, I made a copy of the nab and left it wide open ACL wise, I can browse it.

Thanks for any help.

This site is great BTW!

Add your response here:

Name *:
E-mail:
Protected from spambots!
Website:
rel="nofollow"

Comment *:
HTML is not allowed!

Note: This blog entry is more than two weeks old so your comment, as an anti-spam measure, will be sent for approval.