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

Download this free guide

Download: IT Certifications 101

Inside this exclusive essential guide, our independent experts break down which IT certifications are worth your time and effort, and how to get started obtaining them to further your career— including specific certifications that any cloud or desktop pro should seriously consider.

Start Download

• Corporate E-mail Address:

  You forgot to provide an Email Address.

  This email address doesn’t appear to be valid.

  This email address is already registered. Please login.

  You have exceeded the maximum character limit.

  Please provide a Corporate E-mail Address.

By submitting my Email address I confirm that I have read and accepted the Terms of Use and Declaration of Consent.

By submitting your personal information, you agree that TechTarget and its partners may contact you regarding relevant content, products and special offers.

You also agree that your personal information may be transferred and processed in the United States, and that you have read and agree to the Terms of Use and the Privacy Policy.

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