This tip shows how to display more documents in the same row on a web view.
Code
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 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.
