This tip shows how to display more documents in the same row on a web view.
You have a set of documents
Doc1 Doc2 . . Doc(N-1) DocN
Suppose you want display these documents in a web view in this format (a 3 column view)
Doc1 Doc2 Doc3 Doc4 Doc5 Doc6
. . .
Doc(N-1) DocN
Suppose you don't know the total number of documents.
You need some HTML and some JavaScript.
This is my solution:
You have a view View001 and the form $$ViewTemplate for View001
The View001 has the attribute "Treat view contents has HTML" set. In this view, I put one column with this value:
"<script language="JavaScript"> " + @Char(13)+ " var conta=" + @DocNumber("") +" % 3;"+ @Char(13) + "if (conta == 1) {" + @Char(13) + "document.write("<TABLE><TR>");" + @Char(13) + "}" + @Char(13) + "</script>"+ @Char(13) + "<td width=33%>
...Put here the HTML data formatting and HREF for your document...
</td>" +@Char(13) + "<script language="JavaScript"> " + @Char(13)+ " indice = indice + 1;"+ @Char(13) + "if (conta == 0) {" + @Char(13) + "document.write("</TR></TABLE>");" + @Char(13) + "}" + @Char(13) + "</script>" + @Char(13)
Some explanations: We want an HTML table like this:
<TABLE><TR><TD
Requires Free Membership to View
Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.
WIDTH="33%"> Doc1 </TD><TD WIDTH="33%">
Doc2 </TD><TD WIDTH="33%"> Doc3 </TD></TR></TABLE>
<TABLE><TR><TD WIDTH="33%"> Doc4 </TD><TD WIDTH="33%"> Doc5
</TD><TD WIDTH="33%"> Doc6 </TD></TR></TABLE> and so
on.
In the top JavaScript section, we have to know if we start a new table or if we are inside the table. So we use the formula function @DocNumber to print the sequence doc number N inside the JavaScript. Then the browser will evaluate the statement with the modulo function.
var conta = N % 3;
We will know if we have to start a new HTML table to display a new row. We do so checking the variable "conta."
if (conta == 1) { document.write("<TABLE><TR>"); }
In the bottom JavaScript section in the same way we have to close the HTML table at the right moment:
if (conta == 0) { document.write("</TR></TABLE>"); }
In this section, you noticed that I used a new variable indice
indice = indice + 1;
I need this variable declared in the $$ViewTemplate for View001 form because we don't know the total documents number.
And so in the $$ViewTemplate for View001 form I put some Pass-thru HTML text before the $$ViewBody field:
<script language="JavaScript"> var indice = 0; </script>
Indice is a global JavaScript variable that we increment for every document in the view.
After the $$ViewBody field, we have to put the right HTML to correctly close the TABLE structure.
<script language="JavaScript"> if (indice % 3 == 1) { document.write("<TD></TD><TD></TD></TR></TABLE>") } if (indice % 3 == 2) { document.write("<TD></TD></TR></TABLE>") } </script>
We don't need to check indice = 0 because we have already done this control in the column view.
I used two different variables (conta and indice) for my personal purposes, but you can use just the global variable indice without the @DocNumber("") function. You will have better performance.
This was first published in June 2001