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

There are Comments. Add yours.

TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

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:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.