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.
Skip to the 
You can subscribe to an individual
Very nice Jake - thanks (as always!)
Thanks, Jake - great work!
That's cool - but it doesn't seem to work in firefox ...
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.
@Stein Sebak :
Works fine in my Firefox (2.0.0.12).
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.
"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
hmm... not working in my version of Firefox 2.0.0.12
But when I went back, it did. Something must be taking a bit of time to work.
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.
"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 ...
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.
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.
Jake, I'm talking about the link that you have above the image on this posting. "..., choosing names from the Fake Names Directory:"
Jake, Excellent work!.. thanks, Alastair
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!
...uh, how long has "outputJSON" been around? And why is this the first time I've ever heard of it...?
well, outputFormat=JSON -- you know what I meant. :P
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.
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!
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.
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.
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...
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.
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
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
Very cool. I did notice that it allows duplicate entries to be made.
@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?
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
It could be easily amended Mark, but I wouldn't choose this one if you only want single choices.
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.
Very Nice Jake!
Jake, great as always! Now when are you coming back to help on Ext.nd? :)
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
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
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 ?
Jerome - you need version 7.0.2 to use JSON
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
Thanks Jake,
what parameter/script change required to work with Last Name search instead of First Name.
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
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
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.
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!
Jake this is another great piece of code. But I am trying to modify it to support people and groups. It's easy to modify the fetch to pull entries from the ($VIMPeopleAndGroups) view which works in the GUI selection, but the onSubmit saves the value in the first column which is P or G (Person or Group). I'm afraid a change needs to be made in the 'protoculous-effects-shrinkvars.js', which is way over my head. Do you have any suggestions for an easier workaround?
Thanks!
Jim
Jake
it's not show the names when i run the application on the IE-7 i think it's not find out the names.nsf
Please help me
Thanks
Ankit Srivastav
Hello Jake,
First, i would like to tell you that you did an awesome work.
I found a "bug" that I would like to show you. I don't know if you already know it but well, let see.
I tried to reproduce the bug on your example and it do the same thing.
It only search for the first 2 letter of the last name.
for example :
John Doe
Donal Duck
John XYZ
If I type "Jo" , it will highlight "Jo" inside both John Name - OK
If I type "John", it will highlight "John" inside both John Name - OK
If I type "Do", it will hightlight "Do" inside John Doe and inside Donal Duck - OK
If I type "Doe", it wont highlight anything. - Wrong
In resume, for the first name, I can search for as much letter as I want, but for the last name, I can only search for 2 letter or less or it wont work.
Try this in your demo. The code that Im using is doing the same behavior.
If you're are able to help me to solve that problem, you may contact me by e-mail.
I tried to "debug" the javascript code. I also tried to look inside hidden view of our adress book. No luck so far.
Thanks a milion time !
Jean-Frederic
Edit : Add this to my previous comment.
inside http://www.codestore.net/apps/facebook.nsf/test
here are some keyword that I tried...
When typing BA, it show me Jack Banks and Jack Baxter (and some other) but when adding N, Jack Banks doesnt highlight the N. When adding X, Jack Baxter doesnt highlight the X.
But with Jack Abbott, typing ABBOTT will highlight the complete last name and work as expected.
When trying some letter inside the last name, like Jack Barnes, if I type ARN, it will highlight the 3 letter, but if adding an E, it will still highlight the 3 letter.
Hope you are able to sort this out.
First Name work like a charm, but last name doesnt work like it should.
Thanks again !
Jean-Frederic
Has anyone worked through getting this to work in Domino with Active Directory?
Thanks Jake. I've used this in a couple of applications. I just discovered that names from the names.nsf with an apostrophe in either the first or last name can't be found. Examples are Mary O'Brien or
La'tasha Daniels. What design elements should I be looking in to try and make it work?
Can you tell me how to get the value fom the input box. i.e. to go to that persons record. Thanks
Can't get this to work? No names returned. Runing Domino 8.5.3 and https is always on. Maybe that's it?