Name Picker Revisited - I'm Back
Ferdy Christant stated in this post that "Jake's Back", which made my day in a way. I admit I've been away and I'm glad the new Rough Cuts section has been taken as my return.
With my solutions it's never my aim to dazzle with complex code or convoluted techniques. All I ever want to do is provide simple solutions to common problems and make those solutions (re!)usable and, hopefully, nice looking too. This is what I think I do well and what I've not been so good at of late.
Well, in the same vein as the document sorting code I have some more Web 2.0-style goodness for you all. Something I think you'll like.
Once again, out of necessity, I have revisited a common requirement of Domino apps — Domino Name Pickers on the web.
I needed a name picker for a project I'm working on. After looking at various solutions available I couldn't find one I was happy with and decided to the revisit the approach and write my own. The result will be my next Rough Cut article. For now it's a pre-release/beta. Call it what you will, it's here and ready for you to test and play with. Let me know what you think.
What I've tried to move away from is the convention that a Name Picker must, for some reason, be a popup window. I've also done away with the notion of a textarea being a suitable place to visually render the chosen list of names. It's all very well giving the user a nice to way to add names, but what about when they want to remove them? Both are equally important tasks. Do they have to carefully select the name in the field and delete it manually? Instead of a field I've used a table with a delete link. The field itself is hidden.
Note: If the names look familiar it's because it all came about after I asked you all to add names in this post. The intention of that request was to gather data for another Rough Cut that's on it's way, but it's useful in this case too.
Skip to the 
You can subscribe to an individual
very good,now i have a problem，if the search result is too much，i want to add a scroll bar，how to do？
Excellent!!!
It reminds me of gmail when adding an email address and your contact names appear .
Dietrich
A while back I did an ajax-based phone directory that was similiar but did not have that dramatic entrance!! Not sure which I like better, a floating layer or an in-line layer.
{Link}
@lamon: you would need to fix a maximum size on the search_results div, and set its overflow attribute to "auto".
that one looks pretty nice. I just implemented a similar thing with multiple name pickers in one form using part of NotesSuggest from Julian Robicheaux (I stripped out caching and AJAX because I already had my own lookup and put all in an object to use it more than once in a page).
Now to your code, these ToDos are important IMHO
+ The opening of the lookup box is too slow (this just for show case?)
+ navigating through the results with key-up and down
+ choosing the highlighted value with enter key
I think it is time to build the lookup-functionality in a standardized way (just one js library with an object that can be used more than once in a single form). Since one year or so everybody seems to implement these ajaxian lookups but every developer does it in another approach. Every user knows how to use a combo box. This should be the same with a standard lookup-field of type 'xxx-Suggest'.
Lamon. That's on the todo list.
Mark. We do need a standard way, you're right. Let's see what comes out of this and maybe it will end up being the de-facto approach...
Have you considered using JSON? {Link} The weight of JS to process the resulting JS object may be less than the XSL JS and the weight of data returned is less because it doesn't need the tags. Peter-Paul Koch has a nice {Link} comparison of XML, HTML and JSON.
small bug to report:
if your typing is as poor as mine you will often use the backspace key to correct/delete mistyped letters in the 'search' field. this causes ie to crash in your demo. I am using ie 6.0.2. otherwise very snazzy
Very nice and clean! Looking forward to the rough cut already.
Also: the lookup only works on names right now. Maybe it would be usefull if the lookup would return all users with the key matching names OR surnames - you never know what the user remembers! Maybe even go for the "match key anywhere in the name" approach?
@ fred
I'm using IE 6.0.29 xp sp 2 and the backspace key seems to work fine. ?
Nice work Jake. That has been one of the most pain-in-the-butt items to deal with in the past.
Way back on an R5 Domino app, we were using hidden a-z text inputs and onKeyUp to get the list into the visible control. Even though HTML had no limit on what a text list could hold, Domino's 32k limit meant our 10000 person address book floded the j field regularly.
I can see this haunting even an R6 or 7 app if you're not careful how you push your suggest data, but it looks like you're only bringing the 10 best matches at a time, so you are probably already on top of this. :-)
Overall, very clean behaviors and high marks for usability. :-)
Jake, this is great from a technical and interface perspectives. A great twist on the typical name picker popup.
I implemented something along this line by using Julian Robichaux's code {Link} as a base. I needed to use a book from my sister company in Japan which we replicate to our server. I did a simple radio button to switch between the books but a configurable list box with the book name as the value and the book location as the text would expand this further (one or your To Do items).
I also included a radio button to switch between first and last name lookups. The agent I call on each keypress uses this field to switch between ($VIMPeople) and ($VIMPeopleByLastName) regardless of which book is used. This was significant in my case because the other book is from a 4.6 environment.
I'm looking forward to the next version which incorporates items from your To Do list.
Really nice! May be for your to-do list one more thing (if not already):
- The possibility to see the user detail (as in Notes client), here in Quebec we have so many people with the same name! Generally I put some detail like the Department or full Notes name in a div in my dialogbox.
The demo works great in IE. The following error occurs in FF.
arguments[0].parentNode has no properties
var row = (arguments.length==0) ? this.parentNode.parentNode : arguments[0].parentNode.parentNode;
Alex. This is the kind of thing I'd expect you guys to do in order to customise the widget to meet your needs. I can never satisfy you all.
Joel. I thought I'd fixed that. Woops. Leave it with me. It will be gone by the time it makes it to a download NSF in a Rough Cut.
to all of you...
can someone tell me which is the (ajax xmlhttp)responsetext
maximum permited size / and or/timelimit ?
thanks in advance
makerjoe
makerjoe. As for size, as I understand it, there's no limit per se. As for time, I'm not sure. Ajax calls wait for a response from the server - any response. Is the xml request dealt with like a normal browser request? Maybe the browser timesout in the same way it does with other pages. I'm not sure. I did a Google for "ajax timeout" and guess who's #1 ;o) I'll have another search and see what I can find...
hi jake
just a comment..
as per my testing on a 12000 records nd7 being retrieved using readviewentries i got strange results using client xmlhttprequests and server to server doing som rpc stuff
so
1 using from iexplorer things are ok
2 using agents to retrieve from other nd7 servers thers it comes the incomplte reponse
likely it seems to get a roolover de data
example retriving using count=-1 will not gave the 12000 record it will gave more or less 5000
retriving something like 3500 i got the exact number of records
again these examples uses a server to server agents ajax call
again many thanks
btw
have a look to {Link}
makerjoe
@makerjoe: If I understand you correctly, you are using an agent to retrieve results from a different server? If so, then you are most likely running into the dreaded 32k maximum field size limit when using request_content.
I thinked I found the following link here ?
{Link}
- surely a great AJAX version of a name picker.
@Jake. Tnx. for your example, I also have some work with Web 2.0 and Domino using prototype.js and dojo toolkit, specifically using dojo tabs, dojo combobox (w/autocomplete) and dojo calendar. I'll post on my site some examples in 2-3 days.
@Jake. Tnx. for your example, I also have some work with Web 2.0 and Domino using prototype.js and dojo toolkit, specifically using dojo tabs, dojo combobox (w/autocomplete) and dojo calendar. I'll post on my site some examples in 2-3 days.
@jeff
if so ,
how it would be the right way to have the stream originated in server 1(readviewentries) passed to server 2 (responsetext) passed to ie client (xmlhttp ?openagent) ? without using a mem var or field, just stream the xml response thru out all the chain
again jeff thank in advance
makerjoe
Sorry makerjoe, there is no easy way around the 32k request_content limit. It ranks in the top 5 "stupid issues that cause Domino developers headaches".
You would have to implement a java agent on the first server, and use the networking classes to retrieve the text stream from the second server. Then you would stream that back to the client.
@Jeff
perhaps you are right, but still dont understand where is the limitation on the request content
clicking on ie6
http://server/somensf.nsf/xmlprint?openagent
gives 15000 prints
--------------------------------------------
fiest agent
Function xmlprint
For i=1 To 15000
Print Cstr(i)
Print "<BR>"
Next
Print "end"
End Function
--------------------------------------------
now
clicking on ie6
http://server/somensf.nsf/readxml
gives 2639 prints ????
--------------------------------------------
second agent:
Function readxml
Set objHttp = CreateObject("MSXML2.ServerXMLHTTP.3.0")
url = |http://192.168.1.3/wsdl.nsf/xmlprt?openagent|
objHttp.open "GET", url, False
objHttp.send(Null)
While objHttp.readyState <>4
Wend
If objHttp.readyState = 4 Then Print objHttp.responsetext
End If
End Function
--------------------------------------------
four eyes see more than two
what am i thinking wrong??
cheers
makerjoe
@makerjoe, not sure what the issue is. The only thing that sticks out to me is that the first agent sends data back to the browser in every iteration, whereas the second agent holds everything until the end and then tries to return the responsetext string.
My next test would be to have the first agent return a real XML stream, and then in the second agent I would parse the results from the responseXML string, then print info back to the client in each iteration of the parsing loop.
can i get the link of namepick.nsf
Plz
Can i Get this sample database plz mail me link this
Has anyone got a sample db for this.
I am trying to recreate it and was wondering what the "xslfile: 'names.xsl" line does in the html, and how do I create this file??
Hello,
I really like your name picker. When I put it in a layer, it seems to display behind the layer. If the layer is opaque, it does not display at all. If I leave the layer transparent, I can see it, but it is still behind the layer that is resides on. Does anyone know how to set it to display on top?
Yes, I can get rid of the layers...but they serve some pretty useful purposes in this particular instance.
Thanks for sharing your wonderful work.
Best regards,
Gail. Try adding the following style property to the name picker layer:
z-index:9999;
Do you have a jquery version of your name picker?
Been trying to learn and use jquery and thought this might be a cool thing to include.
Trying to figure it out.. but thought I would ask to see if you might already have a jquery version?
If I figure one out... I'll let you know.
Thanks,
-Troy
Hi Troy,
No I don't. It shouldn't be too hard to port though. If you do, please send a copy over.
Jake
I think I have it figured out. You were correct, was pretty simple once I got past the learning curve with jquery. I am not sure it's the "best" way to make it work with jquery.... but it works!!
Considering I've just started playing with these script libraries last week, I am pretty excited about the functionality they provide.
I'll try to take some time and move it into your sample db and send it to you this weekend.
Thanks again.
I love the functionality.
HOWEVER, I can't get the javascript to run on a saved document. Works great with a new document, but if I open an existing document, there is an error "NamePicker is undefined"
Any suggestions?
thanks
Hi Anne,
It sounds like you're loading the JS code using a relative URL? When the document is saved the document is one more directory away from that "root".
New document is at /db.nsf/form?Open
Saved document is at /db.nsf/view/document?Open
So, if you're opening the JS as src="code.js" it will then be looking for /db.nsf/view/code.js which doesn't exist.
It works in my demo as I've set the BASE href tag in the Head. I'd suggest you use an absolute URL to load the JS file. Add a Computed Value in front of the current URL and add "/"+@WebDbName+"/" in it.
HTH
Jake
Well, i have a requirement where the NAM Picker should show and search names by Last , First Middle Name and also should be able to search for groups by First Name.
Can anybody help me out here.