Pagination on a View in the Notes client

A problem with Notes Views is that when they contain a lot of documents scrolling becomes inevitable. Even when you apply categorized columns it will become necessary that users click through the Views. An option would be that you just start typing and hopefully Notes will lead you to the nearest corresponding document.

When you apply categorized views the categories are displayed vertically below each other so for travelling users with smaller screens it will become tasly to open and close the categories just to see thse categories and corresponding documents displayed in a properly in the overview.

Maybe XPages in the Notes client will bring us some relief, but we are not there yet.

So how do we cope with the issue for the time being?

On the web it is common practice to have some sort of pagination on top / below lists of documents so you can navigate through the list without the need to scroll up and down or move you mouse across the screen. The pagination can be based on number of available pages or just available short cuts (example: the first letter of an available lastname). I myself have written some articles about pagination on this blog which you may check out yourself.

So this is all about the web, I adress this article to pagination in the Notes client.

The simplest way I found is to create a list of similar shortcuts, containing javascript, and render pass thru HTML in Notes. In this example I explain how I added pagination to a list (a Notes View) of persons. The thought is to show a list of persons form which their lastname start with a certain letter. What I needed to accomplish this:

• A Form with an Embedded View. This View should be categorized by the first letter of the lastname @LowerCase(@Trim(Tx_LastName);1). SaveOptions are set to zero ofcourse.
• The Embedded View has the ‘Show single category option’ in use.  As formula write the name of the Field that will acts as a temporary container (Tmp_LastName).
• Add a Field named TmpLastName on top of the Embedded View. Make it editable. As default value give it the value “a” (you could check if this value is really available or not).
• On top of the Form add the following JavaScript and CSS code:

<script language=”Javascript”>
var entryNumber = “”;
function showTab(lastName) {
entryNumber = lastName;
document.forms[0].LastName.value = entryNumber;
entryNumber = “”;
document.forms[0].set_field.click()
}
</script>

<style type=”text/css”>
font {
font-family: “Default Sans Serif”, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 8pt;
color: black;
text-decoration: none;
text-align: left;
text-indent: 1ex;
}
A:link {color: blue; text-decoration: none}
A:visited {color: blue; text-decoration: none}
A:active {color: blue; text-decoration: none}
A:hover {color: blue; text-decoration: none}
</style>

• As final step you need to add a computed text just above the Embedded View. Mark the text as passthru HTML. A Value enter:

varList:=@DbColumn( “”: “NoCache” ; “” : “” ; “PersViewCategorized” ; 1 );
tmpList:=@Implode(“<a href=\”javascript:showTab(‘” + varList + “‘)\”>” + varList+ “</a>” + ” | ” );
@LeftBack(tmpList;”|”)

Here we make a call to first column in the same Embedded View. Around each found category we wrap a JavaScript call which will put the value in the temporary field and finally we call the button to update the UI.

Here is a screendump that shows how it could look like:

A problem discovered

Well everything  looked shiny untill I tried to load the Form in a Frameset. When pressing on one of the links I got the message:

Some work to do IBM….