Tuesday, May 22, 2007

Press 'Enter' In A Field And Trigger An Action

(One final post before I head off for ILUG2007 just because I love you guys! :-)

For all of it's usefulness, the signal-to-noise ratio on the forum at Lotus developerWorks (i.e. notes.net) is quite low. When you do find a really useful nugget, though, you want to share it with the world. I found just such a nugget, which is related to my blog topic from the other day.

If you remember, on the homescreen of my application is a field that allows the user to enter a number and immediately get to the applicable document. I wanted to allow the user to not only use the hotspot to trigger the action, but also to be able to just hit enter and have the action execute and open the document. Unfortunately, I've never found an acceptable solution to this in the client...until now. So, for further proof that there are waaaay smarter folks out there than me, check out this innovative use of JavaScript in the client to accomplish this feat (thanks to Peter Smith!!!):


Then come back...I'll wait...

Tres chic!

So what's going on here? The Reader's Digest version is that when the user enters the search field, the JavaScript function runSearch is triggered and every 1/10 of a second checks the value of the field. If it encounters a press of the 'Enter' key [ if (sString.indexOf(newline)>=0) ], then it clears the newline and presses the button to trigger whatever action you've setup.

So...in my case, I changed the hotspot link to a button. The button contains the LotusScript that does all the work of finding the document and displaying it to the user. Then I simply placed Peter's code in the places he notes in the posting above, and et voilà! Now the user can click the button or hit enter. A simple and elegant solution to a problem I never had solved before.

One tip. If you use an OS-style field, make sure you 'Allow multiple lines' for the field. If you don't, pressing the 'Enter' key won't generate a newline and the JavaScript will never execute the button press.

One other thing you might consider is to clear out the field when the user executes the search. This will depend on your situation, but in my case, the last thing the LotusScript in the button does is clear the field. That way, if the user returns to the homepage by closing the document window, the field will be ready for them to enter the next number.

Labels: , ,


By Anonymous Anonymous, at 12:01 PM  

Fantastic, a very clever solution, your blog is invaluable!

By Blogger Tommy Valand, at 3:55 PM  

I don't know if you already have, but you can simplify the JS-code quite a bit.

In the JS-header, all need is this:

var useClick;
function runSearch(){
var f = document.forms[0];
if(f.searchField.value.indexOf("\n")!=-1){ f.searchField.value = f.searchField.value.replace(/\n/g,"");

Where searchField is the name of the search field and searchButton is the name of the search button.

JavaScript (in Notes/Web) already has a replace-function, so this is not needed.

The /\n/g-part is a regular expression that removes all occurences of carriage-return.

/ and / is the start and end of the regular expression.

\n is a carriage-return (Char(13))

The g at the end of the regular expression indicates that it should match all occurences (without g, it would only remove the first).

You don't need to use window.setInterval/window.clearInterval, as clear-/setInterval is in the global scope.

useClick = setInterval("runSearch()",100);


By Anonymous Thilo Hamberger, at 4:28 AM  

I couldn't get it work when I put the code in the onfocus event of the field. Only the onload event of the form worked for us.
However after we put this form in a upper left frame in all of our databases our user experienced Javascript errors after some time and the Notes client goes up to 100% CPU usage even after closing the databases. Does anyone have an idea what's going on there?

By Blogger Chris Blatnick, at 2:11 PM  

Yikes...sorry Thilo. Not sure what is happening but it sounds like some kind of memory leak. Hopefully someone will see this and suggest a solution for you.

Post a Comment

Links to this post:

Create a Link

<< Home