Column 2 in the view will be almost the same as the Notes view except that we have to generate all the HTML. Domino does nothing for us. So, let's put in a few spaces for indenting with "   " and then the value from the Subject field and a
to move to the next line. Therefore, the column formula looks like this: "   " + Subject + "
". In my example, I didn't allow for opening the document. To do this, you would put an <a href> tag around the contents of Subject. I omitted it here to keep things simpler.

Now, let's think about what we want for column 1. We want it to be categorized, but we want some HTML around the actual text. First, we want to show the twisty (remember, Domino won't generate it for us since we said the contents are HTML). Since everything will be "collapsed" (according to the end user) when the view is opened, we want the twisty pointing to the right, which is the file EXPAND.GIF in the server's /icons/ subdirectory. So, we have "<img src=/icons/expand.gif>" + Category1.

However, this isn't nearly enough. We need for that twisty to be clickable. Normally, you'd just add an <a href> around the image, but I'm going to let you in on a neat Internet Explorer secret. In Internet Explorer 4 or 5, you can capture a click event on the actual page and then, after the click event, figure out what you clicked on. This means we can build the page without the href's and instead just capture the click.

We'll get to that in a bit, but first you want to be able to tell your users that something can be clicked. I'll show you another neat trick. We can add a style to the image tag that tells the browser to change the cursor when you move over the image. It makes sense to use the "click here" cursor, which is called "hand." So, change the first column to be:

Characters are needed because we want to literally include quotes in the output string.

However, we're not done with the first column yet. We're going to need to know that this exact twisty was the one clicked. To do that, we need a unique identifier for the twisty. Using @DocNumber, we can get a unique identifier. So, the first column becomes:

I chose to put the letters "Cat" in front of the category number because it isn't good practice to start identifiers with numbers.

We're getting close
When the twisty is clicked, we need to know that one of our images was clicked instead of another image or an <a href> link. An easy way to do this is to apply a class to all the twisty images. The class will be the same for all images. Then, when something is clicked, we can check to see if what was clicked is in that special class. So, add this: