Towards the Perfect Web View

Laurens and Redouan, 11 March 2004

Category: Views; Keywords: Views lightweight export excel sortable columns

Well, that's an ambitious title for an article. It is what we would like to write for you though. Views are one of the two main design elements in Notes, the other being forms. There are many tips for both of them, but they are scattered over various websites. In this one article we would like to describe how to:

Create lightweight HTML views
Make the columns sortable
Make them exportable to Excel

The larger the views, the larger the benefits of the above features. But designing all views in your database this way makes your views load faster for users and easier to maintain for yourself. As an example database we use a simplified version of Names.nsf, a contact manager, which is attached at the end of the article. If you have more tips, please include them in your feedback.

You can see a demo of all this functionality in this live database.

Lightweight HTML Views

Native Notes webviews are effective, but they consume a lot of bandwith. Notes creates HTML tables for views with rows that contain more characters than needed. A typical row in a Notes generated view could be (adapted from Names.nsf contacts view):

<tr valign="top"><td><a href="/names.nsf/85255e01001356a8852554c200753106/ 79903c820b4d95fec1256e110000a759?OpenDocument">Jake Howlett</a></td><td>jake@codestore.spam</td><td>Office phone: +44 (1) 71</td><td>Codestore - CEO</td></tr>

The light version of this row could look like this, about 1/3 of the code Notes uses.

<tr><td><a href="0/79903c820b4d95fec1256e110000a759">Jake Howlett</a><td>jake@codestore.spam<td>Office phone: +44 (1) 71<td>Codestore - CEO

So how to get from the Notes generated view to a lightweight view?

1. CSS

The greatest improvement can be achieved by using CSS. All the yellow marked code are describing the style and can be replaced by:

TD {
font-size : 11 px;
font-family : arial;
}

You can see in the attached sample database how to connect a style sheet to the view.

2. Using COL

Using COLs you can set a variety of properties, such as the alignment of columns. We haven’t found a nicer way to align columns yet, adding code in the table like <col align="right"> is an easy way to align columns with numbers. Read more about it in this article.

3. Eliminate unnecessary html

In a table the start tags <tr><td> are required according to W3C, but the closing tags are optional, so skipping </td></tr> saves bandwith as well programming time.

4. Shortening the URL

Now we have shortened everything besides the actual url opening the document.. It is quite a long url. By adding <base href="http://www.yourdomain.com/yourdb.nsf/"> in the header of your pages, (e.g. in the $$html field), there is no need for the name of the database in the urls anymore. All urls are opened from the base you defined. Read more in Jake’s article on this.

Documents can be opened by their unique ID. Since this is unique, it is independent of which view the document is in. Notes will open the right document, no matter what view name you use. So even without an actual view named “0”, the view id in the url “85255e01001356a8852554c200753106” can be replaced by “0” or any other figure or alpha numeric combination. Read more on Notestips.

Skip the ?opendocument in the url. Notes simply opens a document if there are no commands after the question mark. Mike Golding has written about it here.

Rumour has it that skipping the ?opendocument might open the document slightly slower. We have not experienced it at all. Anyhow, most users will prefer to open a view faster and then open documents slightly slower from that view.

5. Minimizing calculations in views

Great tips for this can be found in the redbook “Performance Considerations for Domino Applications”.

Let us mention two view related tips from there:

Calculated data is not stored as part of the summary information, but instead is calculated each time the view is accessed. Read More...

When you do have to do complex calculations to display in a column, it is often better to add an extra field to the form that contains the result of the calculations. The calculations happen only when documents are changed and the view suffers no performance impact. In the attached demo database, we have added a hidden Field called URL, that calculates the url to the document.

@If((NameDisplayPref = "1" | NameDisplayPref = 1 | @IsUnavailable(NameDisplayPref)) & (LastName !="" | FirstName != "");

@If(FirstName = "";@Trim(@Subset(LastName;1));@Trim(@Subset(FirstName;1)) + " "  +

@Trim(@Subset(LastName;1)));

NameDisplayPref="2"  | NameDisplayPref = 2 & (LastName!="" | FirstName !="");

@Trim(@Subset(LastName;1)) + @If(FirstName!="";" , "+@Trim(@Subset(FirstName;1));"");

CompanyName)

This formula could easily be added to the form as a field called e.g. DisplayName.

Place all constants in separate columns. For example place the opening “<tr><td>” tags in the first column. These constants are generated extremely fast as they don’t become part of the view’s index. You can see this for yourself when you open a view in Designer. The columns with the constants are rendered before the columns with the fields or formulas.

6. Minimizing calculations of views

Each time a document is modified, all related view indexes are recalculated. In the case of a database containing a large company directory, say 10.000 people, changing one document may make all related views open in seconds instead of in hundreds of a second. If all the earlier recommendations didn’t speed up the views enough, the last resort may be to update the view’s index less often. You can set this at the View Options at the Propelerhead tab. Read More...

7. Validate your html

Internet Explorer and, to a lesser extent, other browser will correct any errors in your html, but it takes processing time to do so. You will be amazed how many small errors you have created when you validate your HTML with this free online tool http://validator.w3.org. Correct any errors you can find and your page will load that little bit faster.

Sortable Columns

Many developers have done their best to create the sorting functionality that the Notes Clients offers in it views. We have evaluated many of these javascript routines and have found only one that is close to perfection. It is bunch of brand new JavaScript functions created by Erik Arvidsson of WebFX. Why is it better than others? It is stable, it is easy to implement, it is well documented, it works with different browsers and it uses the fastest sorting algorythms for each browser. Other code we tested was often slow on large numbers of rows.

You can check his site for the full documentation and the unaltered code. We will only discuss the changes we have made to his code. Indifferent of the changes we have made, Erik’s code and our adapted code can be used in the same way as shown in the example database.

We have added one line to his code, of which we informed Erik. This line makes it possible to also sort columns containing numbers with delimiters (dots and comma’s), by removing them from the sort method with sText = sText.replace(/[\.,]/g,'')

Erik’s script is written to also do the initial sort of a view. But Notes views can already be sorted, so having Erik’s script do the initial sort only slows the opening of the view. To avoid this, we have created the rather inelegant solution of adding a fifth sort type (next to Date, Number etc) called “Nothing”. It doesn’t do anything, except display a down triangle image next to the column by which Notes initially sorted the view.

Make views exportable to Excel

This is done by using simple sandard functionality, that we only discovered after years of using Excel. Most export methods make use of CSV, comma separated files, that usually require some extra user interaction before opening properly in Excel. But Excel is able to open a special kind of file called query files. Read More...

These are simple plain-text files. The file has the extension “.iqy” and would contain somthine like this:

WEB
1
http://www.codestore.net/apps/perfview.nsf/ContactsExportToExcel
Selection=AllTables
Formatting=All
PreFormattedTextToColumns=True
ConsecutiveDelimitersAsOne=True
SingleBlockTextImport=False
DisableDateRecognition=False

This file simply contains settings that you can manually add in Excel to a worksheet by selecting Data > Get External Data > New Web Query.

Just place this file somewhere in your database and create a link to it near the table you want to export.

If you have more tables on a HTML page it is possible to import just one table by stating it’s ID. You could also create special views for these exports with simple viewtemplates only containing one table. In the example database, these special views not only contain the contents of the table in the HTML page, but also all the other fields that users may be interested in. E.g. in a Company Directory your HTML view would just show a couple of fields as user, email address and telephone number, but in the Excel file you could also put fields like Position, Date of Birth etc. etc. Thus you leave it up to the user to select the information he wants in the Excel file.

A nice feature of Excel is that you can place complete URLs in to cells, linking back to the original document in your web-enabled database. So if users want to see the picture of a person, or download a CV of that person in Word format for example, they can simply click on the URL from Excel.

Conclusion

We hope this article can be of help for you when designing views. You can download an example database below (Notes 6 only. If you don’t have a Notes 6 Designer, you can download a fully functional trial version here.

Please feel free to add your feedback. We hope that one of you can write the “Towards the perfect form” article.

Your Authors

Article written by Redouan and Laurens, with some slight editing from Jake.