logo

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.

Comments

    • avatar
    • lamon
    • Mon 6 Mar 2006 07:16 PM

    very good,now i have a problem,if the search result is too much,i want to add a scroll bar,how to do?

  1. Excellent!!!

    It reminds me of gmail when adding an email address and your contact names appear .

    Dietrich

  2. 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".

    • avatar
    • Mark
    • Tue 7 Mar 2006 01:01 AM

    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'.

    • avatar
    • Jake
    • Tue 7 Mar 2006 01:11 AM

    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...

  3. 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.

    • avatar
    • fred
    • Tue 7 Mar 2006 04:54 AM

    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

  4. 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?

  5. @ 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. :-)

  6. 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.

    • avatar
    • Alex
    • Tue 7 Mar 2006 10:57 AM

    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.

  7. 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;

    • avatar
    • Jake
    • Tue 7 Mar 2006 11:33 AM

    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.

  8. to all of you...

    can someone tell me which is the (ajax xmlhttp)responsetext

    maximum permited size / and or/timelimit ?

    thanks in advance

    makerjoe

    • avatar
    • Jake
    • Tue 7 Mar 2006 02:02 PM

    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...

  9. 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

  10. @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.

    • avatar
    • andy
    • Wed 8 Mar 2006 07:03 AM

    I thinked I found the following link here ?

    {Link}

    - surely a great AJAX version of a name picker.

  11. @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.

  12. @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.

  13. @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

  14. 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.

  15. @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

  16. @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.

    • avatar
    • ajay
    • Tue 11 Apr 2006 02:21 AM

    can i get the link of namepick.nsf

    Plz

  17. Can i Get this sample database plz mail me link this

    • avatar
    • Mark
    • Fri 19 May 2006 07:28 AM

    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??

    • avatar
    • Gail
    • Tue 13 Mar 2007 11:19 AM

    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,

    • avatar
    • Jake Howlett
    • Tue 13 Mar 2007 05:23 PM

    Gail. Try adding the following style property to the name picker layer:

    z-index:9999;

  18. 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

    • avatar
    • Jake Howlett
    • Wed 27 Feb 2008 03:10 AM

    Hi Troy,

    No I don't. It shouldn't be too hard to port though. If you do, please send a copy over.

    Jake

  19. 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.

  20. 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

    • avatar
    • Jake Howlett
    • Tue 23 Sep 2008 01:28 AM

    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

    • avatar
    • A R
    • Wed 15 Apr 2009 04:33 AM

    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.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Tue 7 Mar 2006

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content