UPDATE: Looks like Phillipe Gauvin described this technique two months ago on his blog. I was scooped again! Nice job, Phillipe.

Yesterday I mentioned how easy it was to use script.aculo.us to create an auto-complete text box on a Domino web page. There's an example in my Weather Fetcher database (the "CityLookupAjax" Page), but if you want the step-by-step instructions, here they are:

1. Download the script.aculo.us library and extract the contents of the zip file to your hard drive.

2. Add the following files as JavaScript Script Libraries in a Lotus Notes database:

• prototype.js (from the /lib folder, all the other files are in the /src folder)
• scriptaculous.js
• builder.js
• controls.js
• dragdrop.js
• effects.js
• slider.js
• unittest.js

For each .js file, you need to create a new JavaScript Script Library, paste the contents of the .js file in, and name the Script Library exactly the same name as the .js file (like "prototype.js").

3. Create a new Page in the database and include the "prototype.js" and "scriptaculous.js" libraries. You can do this by going to the "JS Header" part of the page (a few items below where you set the Window Title), right-clicking in the script area, and choosing "Insert Resource". Here's a screenshot (click it to see the full-size image):

4. Add the following style definitions to the "HTML Head Content" section of the page:

"

"

You can paste it in just like that, with quotation marks and everything (that way it's a valid Formula language string).

5. Add the following text on the Page, as Pass-Through HTML:

Lookup: 

So you have a text input field called "lookupField", with a div called "lookupDiv" that will display the auto-complete results, and you're creating an Ajax.Autocompleter that will listen on that field and call an agent called "LookupAgent" to get the values that will be displayed for the auto-completer.

You could do this with a regular field on a Form too, just set the HTML ID property on the field and paste the div and script parts afterwards. Please note that you have to put the "new Ajax.Autocompleter" line AFTER the lookup field on the page/form.

6. Save and close the Page, because you're done with that. Create a LotusScript agent called "LookupAgent" that looks something like this:

Sub Initialize
	Dim session As New NotesSession
	Dim doc As NotesDocument
	Dim q As String, qArray As Variant
	Dim decodeVal As Variant
	Dim fieldName As String
	Dim lookupVal As String
	
	'** get the request (HTTP POST request)
	Set doc = session.DocumentContext
	q = doc.Request_Content(0)
	qArray = Split(q, "&")
	fieldName = "lookupval"
	
	Forall stuff In qArray
		decodeVal = Evaluate(|@URLDecode("Domino";"| & _
		stuff & |")|)
		
		If (Instr(1, decodeVal(0), fieldName, 5) = 1) Then
			lookupVal = Strright(decodeVal(0), fieldName & "=")
		End If
	End Forall
	
	'** find the matches
	Dim db As NotesDatabase
	Dim view As NotesView
	Dim vc As NotesViewEntryCollection
	Dim ve As NotesViewEntry
	Dim returnString As String
	
	Set db = session.CurrentDatabase
	Set view = db.GetView("MyLookupView")  '** MODIFY THIS
	Set vc = view.GetAllEntriesByKey(lookupVal, False)
	Set ve = vc.GetFirstEntry
	
	Do Until (ve Is Nothing)
		returnString = returnString & "
" & _
		ve.ColumnValues(0) & "
"
		Set ve = vc.GetNextEntry(ve)
	Loop
	
	'** return a 
 list, which is what script.aculo.us wants
	returnString = "
" & returnString & "
"
	
	Print |Content-Type: text/plain|
	Print |Cache-Control: private|
	Print ||
	Print returnString
End Sub

The agent is a little bit long, but not really complicated. It gets the value entered in our lookup field (passed as an HTTP POST parameter called "lookupval", as defined in the Ajax.Autocompleter params), looks the value up in a view, and returns the results as a

list, which is what script.aculo.us is expecting.

Ideally you would do lookups against a static list rather than hitting a view each time, but this should be okay for a small view.

In any case, now you're done! Open your Page as a web page and watch the Ajax goodness. It should look something like this:



UPDATE #2: Phillipe Gauvin just added a comment with another nice way to work with HTTP POST data:

• Instead of calling an agent, make a URL call to create a document with ?CreateDocument
• The "LookupVal" field on the form will contain the lookup value that is being passed
• The other field on the form should have a computed value of something like this:

val := @DbLookup("":"nocache"; "";"myview"; lookupVal; 1);
@If(@IsError(val); ""; "

" + @Implode("
• " + val + "
") + "

")



• You can also set a $SaveOptions field of "0" to not save the new document

I haven't tried this before, but I'd guess you also have to hide everything but the computed field, have the form set to "Content Type: HTML" or "Content Type: Other", and allow anonymous users to create new documents. I won't know until I've played around with it. Pretty interesting technique.

technorati tag: Show-n-tell thursday, SnTT

---

[ permalink ] [ e-mail me ] [ read/add comments ]