API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
Show View To Browsers In Multiple Columns
Have you ever had a Domino view that shows just a couple columns of information? Maybe you have a name and an email address in a view shown to browsers. By default, Domino views show one document per HTML table row. So your view on the web isn't very wide and you have a lot of white space to the right of your view. Wouldn't it be nice to take that same view and show two documents per HTML table row? You could make better use of the browser screen space. This tip shows you how to do that.

First, your view is going to have to contain HTML. If you want to use an existing view that is shown in the Notes client, then make a copy of the view. Set the original view to be hidden for web browsers. Take the copy and update the name to indicate that it's a web view, but leave the alias the same. Set this view to be hidden for Notes clients. So now you have two views, both with the same alias, that show in different environments.

Next, go into the view and set the "treat view contents as HTML" setting. Around your columns, add table cell opening and closing tags. For example, if you have a column with a value of Name currently, the column value will be updated to have a value of "<td>" + Name + "</td>".

Updating those columns will put everything into its own table cell. The next thing you need to do is add a column to the front of your view. This column will use JavaScript to write out a table row command on every other document. The value for this first column is:

"<script language=\"JavaScript\">if ( (" + @DocNumber(".") + " % 2) == 1) { document.write('</tr><tr\>>'); }</script>"

Using Domino's built-in numbering feature, the view, while it is being generated, will add in a closing </tr> and opening <tr> for every other document. This column in your view should not have a column heading.

Your column headings will also need to include HTML. So your column headers need to have <td> before the header name and </td> after the header name. (You can use <th> instead of <td> if you want).

Finally, go into the view template for this view (or create one if you need it). Before the $$ViewBody field (or the embedded view, if you use that) you'll need to add in the html to create the table and open up the table row for the column headers. For example,

<table border="0" width="100%"><tr>

That pass through HTML will open up the HTML table, and then open up the row for the headers. The row for the headers will be closed off by the first document in the view. The second document in the view will not close off the first row, so the data will continue on that first row. The third document in the view will close the row and open up a new row. This will continue all the way down the view.

After the $$ViewBody field, you will need to close the last HTML row and close the table using pass through HTML.

Give it a try! The first thing you'll notice is that there's headers only over the "left column" (instead of over both columns). This is because the header is only written out once, so it will appear over what ends up being the odd-numbered documents. Many times we'll set the view to hide the headers (it's a view property) and put the headers (what we want to show to the browser) into our $$ViewTemplate for the view. Just make sure to not close your header row because the first document in the view will close it out for you.

What if the user doesn't have JavaScript enabled? Then everything will be written out in one row. If you're worried about that, then you can add some more to the first column in the view. Basically, what you're going to do is say that if JavaScript is not enabled then you're always going to write out a close/open table row set of tags. This will put everything into one column for browsers without JavaScript enabled. To do that, update your first view column by adding this value:

"<noscript></tr><tr></noscript>"

This change will allow this view to work in JavaScript enabled browsers (two documents per HTML row) and non-JavaScript enabled browsers (one document per HTML row).

What if you have a categorized view? This technique should be used in the way it was meant - with a non-categorized view that shows just a few columns. With a categorized view, the documents fitting under each category would be scattered across the screen (since the 2nd document appears to the right of the first document). So don't try to do this if you're using a categorized view.