One technique used in Domino web sites is having a view where the first column is a check box. This allows users to select multiple documents for some form of processing. Here, we will enhance this technique by highlighting the entire table row when the check box is selected. It gives a greater visual indicator to your users that the row in the table is selected.

What you're going to want to do to make this work the best is not to rely on Domino generating the table for you (your view). There are two reasons for this. The first reason is because Domino has cellspacing defined when it generates the table, as in <TABLE CELLSPACING="...">. Highlighting the whole row when cellspacing is used means the line won't be solid. It's not the worst thing in the world, but it could look better. If you want to have Domino generate the HTML for you, this trick can still be used - it just won't look as good as it could.

The second reason is that we want to specify an ID on each row (so we can change it's style later on). This is much easier to do if Domino isn't generating the HTML for us.

So, you'll want to turn the view property "Treat contents as HTML" on. This way Domino won't generate the HTML tags for you. You will have to do those yourself.

The first column of your view will need to open up a row. You will want to put an ID on this row. The ID should be unique to the table, so we can just use the document UNID for a unique value. So the value for column 1 should be:

"<tr id=\"TR" + @Text(@DocumentUniqueID) + "\">"

The second column should contain your check box. The value for this check box will be the document UNID as well. This is probably what you've done in the past if you've created a "user-selectable" view.

"<td><input name=\"Document\" type=\"checkbox\" onclick=\"highlight(this);\" value=\"" + @Text(@DocumentUniqueID) + "\" /></td>"

The remainder of your columns are what you want to show in the view. Remember to generate the HTML for all your columns, so that means you'll need to put opening <td> and closing </td> tags around the values for the columns.

The final column should close out your row like this: "</tr>"

Now, create a view template (either use a page or a form) to hold your view. You'll need to add some pass through HTML before your embedded view (or $$ViewBody field) to open up the HTML table. We want to define the table so there is no cell spacing - this will assure that the entire highlighted row will looks like a continuous highlight. But no cell spacing can scrunch things together too closely, so we add some cell padding (distance between the border of the cell and the inside text) to compensate. So, before the embedded view or $$ViewBody, add this HTML:

<table border="0" cellspacing="0" cellpadding="2" width="100%">

The width of 100% tells the table to go as wide as the screen. It's optional, but the highlight looks a little better if you use it.

After the embedded view or $$ViewBody, you need to close the table: </table>

Look back to where the check box was defined. When the check box is clicked, a JavaScript function called highlight is called, and the check box object (that's what the keyword this refers to) is passed in. So let's create that function.

The function should go in to the JSHeader area of your view template. It should get a handle to the corresponding row object on the page. Since both the check box and the ID of the row use the document UNID, it's pretty easy to get a handle to the row. Once we have a handle, then check to see if the check box is checked or unchecked and set the background color of the row appropriately. In this example the colors are hard-coded in the JavaScript function, but you could experiment with variables or using different class definitions or whatever. Here's the code:

function highlight(checkbox) {
   if (document.getElementById) {
      var tr = eval("document.getElementById(\"TR" + checkbox.value + "\")");
   } else {
      return;
   }
   if (tr.style) {
      if (checkbox.checked) {
         tr.style.backgroundColor = "lightgreen";
      } else {
         tr.style.backgroundColor = "white";
      }
   }
}

First, check to see if the user has a standards-based browser. If they do, get a handle to the row with the same UNID as the passed-in check box's value. If they don't have a standards-based browser, then simply exit gracefully.

Once the row has been found, make sure the "style" value can be set. If it can, then check to see if the passed-in check box is checked or unchecked. If it's checked, set the background color to light green. If it's unchecked, set it to white.