Display more documents in the same row on a web view

How to display more documents in the same row on a web view.

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 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
This Content Component encountered an error



Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:




  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...