![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Many Domino views present documents in alphabetical order. When you look at these databases in a Web browser, you may want to provide a navigation bar with the letters of the alphabet on it. This allows you to click the letter "C," for example, and go directly to documents created by people with a last name that begins with "C." This tip shows you how to create an alphabetical navigation bar for your Web applications.
Downloading the sample database
If you want to follow along with the example shown in this tip, you can download the self-extracting sample database (35KB) from the Sandbox.
Basic approach for creating an alphabetical navigation bar
The sample database contains meeting documents, alphabetically organized by the last name of the person who the meeting is with. The Meetings view appears in a Web browser as follows, with an alphabetical navigation bar at the bottom of the screen:
Figure 1. Meetings view
The navigation bar only displays letters for documents that exist. For example, since no meeting documents exist containing someone with a last name that begins with "B," the letter "B" does not appear in the navigation bar.
To create this type of navigation bar:
- Create the form to display your Web application. In the sample database, we chose to create a $$ViewTemplateDefault form.
-
On this form, create a hotspot that displays computed text. In the sample database, we placed the following Pass-Thru HTML on the form (beginning both sections of code with a left square bracket "["):
<TABLE border=0 cellspacing=0 width="602"> <TR><TD bgcolor="#f0f0f0" colspan=3> <TABLE border=0 width="100%"> <TR><td width=20%> <Div align=left>Back</DIV> </TD> <TD width=60% align=center> <p class=tableheader>Meetings</p></TD> <TD width=20%> <DIV align=right>Forward</DIV> </TD></TR> </TABLE> </TD></TR> <TR valign =top><td bgcolor="#f0f0f0" width=1> </TD> <TD width=100%>] </TD><td bgcolor="#f0f0f0" width=1> </TD></TR> <TR><TD align=center colspan=3 bgcolor="#f0f0f0"> <TABLE border=0 width="100%"> <TR><td width=20%></TD> <TD width=60% align=center> <Computed Value> </A><BR> </TD> <TD width=20%></TD></TR> </TABLE></Center> </TD> </TR> </TABLE>
- Select the tag <Computed Value> (shown in bold above) and choose Create - Hotspot - Formula Pop-up. We don't create constant links here, because we only want to display the letters on the navigation bar that actually have documents listed under that letter. Also, since the code is on a $$ViewTemplateDefault form, we need to calculate the view name because the application uses this form for any views that don't have their own "private" $$ViewTemplateDefault form.
-
Now, write the formula for the hotspot, which displays the navigation bar. This formula first retrieves the current view name, and then includes any extra arguments that you want as a string constant:
vn:=@Subset(@ViewTitle;-1); vwsrc:=vn+"?openview&count=12&collapseView&StartKey="; -
Next, create a hidden, categorized view that helps you retrieve the letters that have documents associated with them. In the sample database, we called this view
(lkView). To categorize documents based on the first letter of the user's last name, use the following formula in the view's column:
lastname:=@Word(mName;" ";2);As you can see in the following screen, our hidden view (lkView) contains the letters "A", "D", "G", "J", and "S."
@Left(lastName;1)
Figure 2. Hidden view
- Now, add a column as the first column in your "real" view. Use the same formula as the one in the column of the hidden view, (lkView). Make sure this column is sorted and hidden. Adding this column ensures that the StartKey argument works.
-
Back in the hotspot formula in the $$ViewTemplateDefault form, add the following line of code to retrieve the letters listed in the (lkView):
lkview:="clAll"; -
To retrieve a multivalue field, do an @DbColumn on your lookup view by adding this code:
s1:=@UpperCase(@DbColumn("":"";"":"";lkview;1));
-
Add the first bit of the HTML for the HREF to the code:
s2:="<A HREF="+vwsrc + s1+">"+ s1;
-
Lastly, turn it into a string by using the end of the HTML tag as the separator (notice the space after the </A> tag):
@Implode(s2; "</A> ")
That's all there is to it. Run your application in a Web browser and see how great it looks!
Peter Greaves is a Portal and Collaborative Services architect with IBM Software Services for Lotus. From a background as a Lotus Principal Developer and J2EE Portal team lead, he has been working since 2000 to help clients to implement and capitalize on WebSphere Portal and other Lotus technologies in a variety of technical design, development, and architectural roles. You can contact Peter at pgreaves@uk.ibm.com.
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
