In the Notes client, when you start typing in any view, a "Starts with..." box automatically appears:



This functionality is very handy, especially when you want to "jump to" a particular category in a view:



Remember back in V3 how you didn't get this box at all? You just started typing as fast as you could, to make sure Notes got the entire string you were looking for? But I digress.

So, how would you implement this for web users? Click the Read More link below to learn how...

I've implemented my "Starts with" box inside a page that contains the outline for the application. Here's how this page looks for web users:



This page is contained within the following frameset in the navigation frame:

banner
navigation	NotesView

The content of the NotesView frame is a categorized view that looks like this for web users:



In the design element where you want to add the "Starts with" box, you need to close off the <FORM> tag that Domino automatically generates when it translates that design element into HTML:

</form> <!-- close off form Domino automatically created -->

(The above HTML is pass-thru HTML.)

Next, add the HTML tags for a new form called "jump". This form will contain a single text box (or field) that the user will use to enter the search text. The form's onsubmit event is configured to invoke a Javascript function called jumpTo() when the user hits the enter key from within the text box. A submit button is also included, which essentially does the same thing. (The following is pass-thru HTML.)

<form name = "jump" onsubmit="jumpTo(); return false;" action="/" method="POST">
Starts with... <input name="Key" type="text" value="">  
<input type="submit" value="Submit" />
</form> The javascript code behind the jumpTo() function is contained within the page's JS Header event:

function jumpTo ()
{
	var frm;
	var search;
	var newSearch;
	var keyValue;

	frm = document.jump;

	search = window.location.search;

	keyValue = frm.Key.value;

	if ( keyValue == "" )
	{
		alert ( "Please enter a key" );
		return false;
	}

	search = parent.NotesView.location.search;

	newSearch = search + "&StartKey=" + 
                                        document.jump.Key.value + 
                                        "&CollapseView";

	parent.NotesView.location.search = newSearch;
}

The above function grabs the value in the Key field and uses it to create additional search parameters for the URL in the NotesView frame. Note that you need to append "&CollapseView" to the end of the URL. If you don't, Domino will navigate the web view to the first entry after that category.

No comments.