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 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 t

Digg This!     StumbleUpon     Del.icio.us

RELATED CONTENT HTML Write HTML and JavaScript in Notes view rows and columns on the Web Open Lotus Notes documents in Microsoft Word without coding Trap an attachment path via the Domino file upload control field A bevy of Notes/Domino development tips Styling Lotus Domino Web fields How to convert Microsoft Word or Microsoft Excel documents to HTML An easier way to view multiple columns on the Web How to print a form in landscape format automatically Tip contest winner: Hide view column while being able to sort it HTML signature maker

RELATED RESOURCES 2020software.com, trial software downloads for accounting software, ERP software, CRM software and business software systems Search Bitpipe.com for the latest white papers and business webcasts Whatis.com, the online computer dictionary

he 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.