Domino views with fixed column width on the Web

Domino views with pixel defined column width on the Web

Background

In a previous article we have seen, how to adapt or improve the layout of a view for browsers with stylesheets (css). See: Further improve your Domino views on the Web. In this example we used as much as possible of the domino integrated web engine. We got the intended results just by adding a stylesheet. In 95% of all cases the outcome fulfills all our requirements. But in some cases we need a little bit more control. Domino generated views layout can not fulfill all our requirements. For instance we like to define the width of the columns with pixel precision an we expect that every browser displays and renders the page as accurate as possible. See how we do it:

Requirements

To define the width of our columns we use the "<colgroup>" tag between the "<table>" tag and the first row-tag "<tr>".

<table>
<colgroup>
   <col width="120px" >
   <col width="120px" >
   <col width="150px" >
   <col width="200px" >
</colgroup>
<tr><td> ...

More information about The COLGROUP element you can find at w3.org:
Very simple so far, but Domino doesn't allow us to define colgroups directly. Hence we must disable the domino web engine for the view and for the $$ViewTemplate:


	For the Form (left), select "HTML" for the "Content type" and for the view (above) select "Treat view content as HTML"

And within both, the form and the view, we must write the html code:

$$ViewTemplate content

1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2:"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
3:<html>
4:<head>
5:<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
6:<meta http-equiv="Content-Script-Type" content="text/javascript">
7:<meta http-equiv="Content-Style-Type" content="text/css">
8:<link rel="stylesheet" href="<computed Value>view.css" type="text/css">
9:<title>View with exactly defined column width</title>
10:</head>
11:<body>
12:<table>
13:<colgroup>
14:<col width="120px">
15:<col width="120px">
16:<col width="150px">
17:<col width="200px">
18:<col width="200px">
19:</colgroup>
20:
21:</table>
22:</body>
23:</html>

Explanation:
Line 1: Tells the browser to which kind of html we stick.
Line 2: With the link to the DTD we tell the browser to work in Standards compliance mode.
Lines 3, 4, 10, 11, 22 and 23: Are standard tags of a html page.
Lines 5,6,7: Not imperatively required, but telling the browser what we'll send, makes our life easier, by avoiding bad surprises.
Line 8: Includes our stylesheet. The computed text "<computed Value>" with the Formula :
"/"+@Unique(@ReplaceSubstring(@Subset(@DbName;-1);"\\":" ";"/":"+"))+"/"
makes our Notes-DB position independent.
Line 9: With the title we put some publicity on our "roof" and don't care if people take note or not.
Line 12: Now the interesting things starts! This is the table opening tag.
Line 13 to 19: Between the opening and closing colgroup tags, we define the column width by pixels for each column in our view.
Line 20: The Field $$ViewBody of type "Computed for display" with the content "" (empty) is the link to our view.
Note: Alle table tags like <tr>, <th> and <td>, etc. are generated by the view, see below.
Remark: Strictly speaking, the real link is the name of the form "$$ViewTemplate for view-Alias-name", where view-Alias-name must correspond exactly to the alias name of the view!
Line 21: Closing tag of the table, and for the form we are done.

View content

In our example we have 5 columns with the headers:

First Name

Name

Date

Department

e-mail

Each column label must be set between an opening and a closing tag "<th></th>" and the header row requires an opening and a closing tag <tr></tr> the latter two we write in front of the first column, and at the end of the last column respectively. The following line shows how it must look like:

<tr><th>First Name</th>

<th>Department</th>

Alternative: You are free to define the above line within the $$ViewTemplate form (between lines 19: and 20:) and check "Do not display Title in column header" for each column in the view.

Now each column requires a Formula. In our case, each field name is set between tags:

"<tr><td>"+FirstName+"</td>"
"<td>"+Name+"</td>"
"<td>"+@Text(@Date(Date))+"</td>"
"<td>"+Department+"</td>"
"<td>"+email+"</td></tr>"

The first column gets the additional row opening tag, and the last column the corresponing closing tag. That's it!
Remark: The tags are pure text, that's why me must convert dates or numbers to text first, to avoid incorrect data arrors.

For your convenience you may download the zipped nsf-DB ** with the fully working examples.
Within the download you'll also find an additional example using xhtml instead of html4.

Download test CSS DB

** The Example DB was created with ND6, but converted back to the R5-File format. Of special interest is the ND6 generated new Field "$MimeType". In our example DB this field has the value "text/css" for the view.css Page. Setting this field correctly for a css or a javascript page avoids a warning message in w3c compliant browsers, and hence is good practice!