IBM Lotus Domino: Exploring View Options for the Web

Exclusive offer: get 50% off this eBook here
IBM Lotus Domino: Classic Web Application Development Techniques

IBM Lotus Domino: Classic Web Application Development Techniques — Save 50%

A step-by-step book and eBook guide for web application development and quick tips to enhance applications using IBM Lotus Domino

£22.99    £11.50
by Richard G. Ellis | May 2011 | Enterprise Articles IBM

Views serve as indexes to documents in a database. Virtually all Domino applications that contain composed documents also contain one or more views that facilitate locating and re-opening previously saved documents. Some views are intended for users, and some views are intended to be used only by internal processes or by formulas to look up values. Of course, you can use the same view for both users and lookups, but doing so can be problematic.

Topics in this article by Richard G. Ellis, author of IBM Lotus Domino: Classic Web Application Development Techniques, include the following:

  • Understanding view Action buttons
  • Use Domino-generated default views
  • Use the "Treat view contents as HTML" option
  • Use the View Applet (with caution)

 

IBM Lotus Domino: Classic Web Application Development Techniques

IBM Lotus Domino: Classic Web Application Development Techniques

A step-by-step guide for web application development and quick tips to enhance applications using Lotus Domino

        Read more about this book      

(For more resources on IBM, see here.)

Views are important to most Domino applications. They provide the primary means by which documents are located and retrieved. But working with views on the Web is often more complicated or less satisfactory than using views with the Notes client. Several classic view options are available for web applications, all of which have draw-backs and implementation issues.

A specific view can be displayed on the Web in several different ways. So it is helpful to consider view attributes that influence design choices, in particular:

  • View content
  • View structure
  • How a view is translated for the Web
  • How a view looks in a browser
  • Whether or not a view template is used
  • View performance
  • Document hierarchy

In terms of content, a view contains:

  • Data only
  • Data and HTML tags

In terms of structure, views are:

  • Uncategorized
  • Categorized

In terms of the techniques used by Domino to translate views for the Web, there are four basic methods:

  • Domino-generated HTML (the default)
  • Developer-generated HTML (the view contains data and HTML tags)
  • View Applet (used with data only views)
  • XML (the view is transmitted to the browser as an XML document)

The first three of these methods are easier to implement. Two options on the Advanced tab of View Properties control which of these three methods is used:

  • Treat view contents as HTML
  • Use applet in the browser

    IBM Lotus Domino: Exploring View Options for the Web

If neither option is checked, then Domino translates the view into an HTML table and then sends the page to the browser. If Treat view contents as HTML is checked, then Domino sends the view to the browser as is, assuming that the developer has encoded HTML table tags in the view. If Use applet in the browser is checked, then Domino uses the Java View Applet to display the view. (As mentioned previously, the Java Applets can be slow to load, and they do require a locally installed JVM (Java Virtual Machine)).

Using XML to display views in a browser is a more complicated proposition, and we will not deal with it here. Pursue this and other XML-related topics in Designer Help or on the Web. Here is a starting point:

http://www.ibm.com/developerworks/xml/

In terms of how a view looks when displayed in a browser, two alternatives can be used:

  • Native styling with Designer
  • Styling with Cascading Style Sheets

In terms of whether or not a view template is used, there are three choices:

  • A view template is not used
  • The default view template is used
  • A view template created for a specific view is used

Finally, view performance can be an issue for views with many:

  • Documents
  • Columns
  • Column formulas
  • Column sorting options

Each view is indexed and refreshed according to a setting on the Advanced tab of View Properties. By default, view indices are set to refresh automatically when documents are added or deleted. If the re-indexing process takes longer, then application response time can suffer. In general, smaller and simpler views with fewer column formulas perform better than long, complicated and computationally intensive views.

The topics in this section deal with designing views for the Web. The first few topics review the standard options for displaying views. Later topics offer suggestions about improving view look and feel.

Understand view Action buttons

As you work with views on the Web, keep in mind that Action buttons are always placed at the top of the page regardless of how the view is displayed on the Web (standard view, view contents as HTML) and regardless of whether or not a view template is used. Unless the Action Bar is displayed with the Java applet, Action buttons are rendered in a basic HTML table; a horizontal rule separates the Action buttons from the rest of the form. Bear in mind that the Action buttons are functionally connected to but stylistically independent of the view and view template design elements that display lower on the form.

Use Domino-generated default views

When you look at a view on the Web, the view consists only of column headings and data rows. Everything else on the page (below any Action buttons) is contained on a view template form. You can create view templates in your design, or you can let Domino provide a default form.

If Domino supplies the view template, the rendered page is fairly basic. Below the Action buttons and the horizontal rule, standard navigational hotspots are displayed; these navigational hotspots are repeated below the view. Expand and Collapse hotspots are included to support categorized views and views that include documents in response hierarchies. The view title displays below the top set of navigational hotspots, and then the view itself appears.

If you supply a view template for a view, you must design the navigational hotspots, view title, and other design elements that may be required.

View contents are rendered as an HTML table with columns that expand or contract depending upon the width of cell contents. If view columns enable sorting, then sorting arrows appear to the right of column headings. Here is an example of how Domino displays a view by default on the Web:

IBM Lotus Domino: Exploring View Options for the Web

In this example, clicking the blue underscored values in the left-most Last Name column opens the corresponding documents. By default, values in the left-most column are rendered as URL links, but any other column—or several columns—can serve this purpose. To change which column values are clickable, enable or disable the Show values in this column as links option on the Advanced tab of Column Properties:

IBM Lotus Domino: Exploring View Options for the Web

Typically a title, subject, or another unique document attribute is enabled as the link.

Out of the box default views are a good choice for rapid prototyping or for one-time needs where look-and-feel are less important. Beyond designing the views, nothing else is required. Domino merges the views with HTML tags and a little JavaScript to produce fully functional pages.

On the down side, what you see is what you get. Default views are stylistically uninspiring, and there is not a lot that can be done with them beyond some modest Designer-applied styling. Many Designer-applied styles, such as column width, are not translated to the Web. Still, some visual improvements can be made. In this example, the font characteristics are modified, and an alternate row background color is added:

IBM Lotus Domino: Exploring View Options for the Web

Include HTML tags to enhance views

Some additional styling and behavior can be coded into standard views using HTML tags and CSS rules. Here is how this is done:

In this example, <font> tags surround the column Title. Note the square brackets that identify the tags as HTML:

IBM Lotus Domino: Exploring View Options for the Web

Tags can also be inserted into column value formulas:

"[<font color='darkblue'>]" + ContactLast + "[</font>]"

When viewed with a browser, the new colors are displayed as expected. But when the view is opened in Notes, it looks like this:

(Move the mouse over the image to enlarge it.)

The example illustrates how to code the additional tags, but frankly the same effects can be achieved using Designer-applied formatting, so there is no real gain here. The view takes longer to code and the final result is not very reader-friendly when viewed with the Notes client.

That being said, there still may be occasions when you want to add HTML tags to achieve a particular result. Here is a somewhat more complicated application of the same technique. This next line of code is added to the Title of a column. Note the use of <sup> and <font> tags. These tags apply only to the message See footnote 1:

Last Name[<sup><font color='red'>]See footnote 1[</font></sup>]

The result achieves the desired effect:

IBM Lotus Domino: Exploring View Options for the Web

More challenging is styling values in view columns. You do not have access to the <td> or <font> tags that Domino inserts into the page to define table cell contents. But you can add <span> tags around a column value, and then use CSS rules to style the span. Here is what the column formula might look like:

"[<span class='column1'>]" + ContactLast + "[</span>]"

Here is the CSS rule for the column1 class:

.column1 {
background-color: #EEE;
cursor: default;
display: block;
font-weight: bold;
text-decoration: none;
width: 100%;
}

These declarations change the background color of the cell to a light gray and the pointer to the browser default. The display and width declarations force the span to occupy the width of the table cell. The text underscoring (for the link) is removed and the text is made bold.

Without the CSS rule, the view displays as expected:

IBM Lotus Domino: Exploring View Options for the Web

With the CSS rule applied, a different look for the first column is achieved:

IBM Lotus Domino: Exploring View Options for the Web

IBM Lotus Domino: Classic Web Application Development Techniques A step-by-step book and eBook guide for web application development and quick tips to enhance applications using IBM Lotus Domino
Published: March 2011
eBook Price: £22.99
Book Price: £36.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on IBM, see here.)

Use the "Treat view contents as HTML" option

Setting the view option Treat view contents as HTML on the Advanced tab of View Properties enables considerably more control over view headers, rows and columns, but at a price. Once you select this option, you are responsible for the structure and style of the view. While not strictly necessary, you should always create view templates for this kind of view.

Remember that a view is typically translated into an HTML table when composed for the Web. A little further on, an alternative to rendering a view as a table is illustrated.

Structure HTML views as tables

On the view template, surround the $$ViewBody field or the embedded view element with <table> tags that have been marked as Pass-Thru HTML. Note here that the border attribute has been coded:

IBM Lotus Domino: Exploring View Options for the Web

Add <tr> and <th> (or <td>) tags and attributes into your column titles. It is not necessary to identify the tags as HTML with square brackets. In this example, the Last Name column title sets the width of the column to 90:

IBM Lotus Domino: Exploring View Options for the Web

Often the <tr> tag is added to the title of the left-most column, and a corresponding </tr> tag is added to the end of the title of the right-most column. Alternatively, you can add additional left-most and right-most columns whose values are set to the <tr> and </tr> tags respectively. Separating the row tags from the data columns in this manner offers more flexibility in terms of rearranging columns in the view.

Next, change column values from simple field names to computed strings that include HTML tags. For example, the column value of the Last Name column would usually be a simple referent to a document field name:

ContactLast

But in an HTML view, you modify the simple column value formula to include the required HTML tags:

"<tr><td>" + ContactLast + "</td>"

Again, if you added the left-most and right-most columns to accommodate the <tr> and </tr> tags, code column value formulas for those columns appropriately and do not include the <tr> tag in the Last Name column value formula.

In this example, the width of the first column is set explicitly with the WIDTH= attribute in the column title; the result is a rendered table with a slightly wider left column compared to the default. Note that the browser assigns some style (centering, bold) to the <th> tags inserted in the column titles:

IBM Lotus Domino: Exploring View Options for the Web

Code links to open documents

To open a document from a view, the contents of the table cell must contain a valid HTML link coded with an anchor (<a>) tag. In this example, the formula for the ContactLast column is modified to include a computed <a> tag:

db := "/" + @WebDbName ;
vw := "/" + @Subset(@ViewTitle;1) ;
doc := "/" + @Text(@DocumentUniqueID) + "?OpenDocument" ;
link := db + vw + doc ;
"<tr><td><a href=\"" + link + "\">" + ContactLast + "</a></td>" ;

Caution: Complex column formulas impact view performance.

After looking at this computed column formula, you might be thinking about the performance penalty being paid here, since these formulas are recomputed each time the view is updated. For static views that do not change much, this may not be a concern, but for larger views that change frequently, performance can be problematic.

A better alternative to computing a URL in a column formula is to compute and store the URL for a specific document in the document when it is saved. The view column formula then becomes a reference to the form field containing the URL, rather than a computation.

On the form, add a Computed Text field (for example, docURLcell) with this formula:

db := "/" + @WebDbName ;
vw := "/" + @Subset(@ViewTitle;1) ;
doc := "/" + @Text(@DocumentUniqueID) + "?OpenDocument" ;
link := db + vw + doc ;
"<td><a href=\"" + link + "\">" + ContactLast + "</a></td>"

In the view column formula, code just the name of the field:

docURLcell

This is a much cleaner solution and will improve the view performance.

Structure HTML views as lists

In some cases, you may prefer to display a view as a list. On the view template, surround the $$ViewBody field or the embedded view element with <ul> or <ol> tags that have been marked as Pass-Thru HTML. In this example, the <ul> tag also includes a CSS class name:

IBM Lotus Domino: Exploring View Options for the Web

Add <li> and other HTML tags as needed to the column title(s) and to the column value formula(s). Create CSS rules as appropriate and link to the page containing those rules from the view template's HTML Head Content area.

In this example, the view contains two columns. The first column is hidden, and its value is the contactLast field. This column is sorted in ascending order by last name. The second column displays both the contactLast and contactFirst names, and it is this column that displays to users.

A CSS class name is added to the title of the second column:

<li class='columntitle' >Contact Name</li>

The value of the second column references a Computed field in the documents named docURLItem. This field's formula computes the URL to the document, as in the previous topic. Note that in the formula the link (<a>) is enclosed by <li> tags:

db := "/" + @WebDbName ;
vw := "/" + @Subset(@ViewTitle;1) ;
doc := "/" + @Text(@DocumentUniqueID) + "?OpenDocument" ;
link := db + vw + doc ;
"<li>" +
"<a href=\"" + link + "\">" + ContactLast + "</a>" + ", " +
ContactFirst +
"</li>"

The view template links to a CSS page that includes the following CSS rules. The first rule applies to the list as a whole. The second rule applies to all <li> tags within the list. The third rule applies just to the column title:

ul.viewaslist {
background-color: #EEEEEE;
border: solid 1px black;
font-family: Verdana;
font-size: 10pt;
padding: 10px;
width: 15em;
}
ul.viewaslist li {
color: darkblue;
list-style-type: none;
}
li.columntitle {
font-weight: bold;
margin-bottom: 5px;
}

The list displays in a browser as follows:

Set the view line count

Using the $$ViewBody field with HTML views works well, but the number of rows that display may be quite large. If you need to limit the number of lines that are rendered at one time, use an embedded view element on the view template instead of a $$ViewBody field.

Set several properties on the Info tab of Embedded View Properties. Especially, set the Display option to Using HTML and set the Lines to display value to control the line count.

IBM Lotus Domino: Exploring View Options for the Web

Note that the default and maximum number of lines that are displayed in views depend upon server settings controlled by the Domino administrator. Check settings on the Domino Web Engine tab on the Internet Protocols tab on the server document in the Domino Directory. In this example, the Default lines per view page is set to 30, and the Maximum lines per view page is set to 1000:

IBM Lotus Domino: Exploring View Options for the Web

Create Notes versions of HTML views

An HTML view intended for the Web is difficult to read with the Notes client. Here is what such a view might look like in Notes:

IBM Lotus Domino: Exploring View Options for the Web

If the content of this view is useful to Notes users, you may want to create a second view that includes all columns, but not the HTML tags. You can hide the views with HTML from Notes clients using the Design tab of Design Properties for the view. Likewise, you can hide the views without HTML from Web clients.

Use the View Applet (with caution)

The View Applet is intended to provide a view experience similar to that which one gets with the Notes client. The view is displayed in a window on the form. There may be scrollbars. Columns can be sorted by clicking on column headings. Categories expand and collapse independently from one another. Some styling options are available that can improve the look.

To use the View Applet, add an embedded view control to a view template and set the Display option to Using Java Applet:

IBM Lotus Domino: Exploring View Options for the Web

You set the size of the applet window and other attributes with Embedded View Properties. Some experimentation is likely to be required.

Using the View Applet, a view might render as follows:

IBM Lotus Domino: Exploring View Options for the Web

There are several issues with the View Applet, so it might not be the best choice to use. Issues include the following:

  • If a JVM is not installed on the user's desktop, the applet will not load.
  • The applet sometimes fails to initialize properly, requiring the page to be refreshed or the browser to be restarted.
  • The applet can be slow to load.
  • Clicking too fast on an applet scrollbar can hang a browser, especially in larger views.
  • Styling options are limited.

The View Applet may be a good choice if you need something quick and short-term, if you are prototyping an application, or if it provides you with a desirable feature you cannot easily implement in another way. If you do use this option, let your users know about the performance and functional issues that can arise.

Summary

In this article we explored various view options for the Web.

The next article will show us how to create action buttons and add style to views.


Further resources on this subject:


IBM Lotus Domino: Classic Web Application Development Techniques A step-by-step book and eBook guide for web application development and quick tips to enhance applications using IBM Lotus Domino
Published: March 2011
eBook Price: £22.99
Book Price: £36.99
See more
Select your format and quantity:

About the Author :


Richard G. Ellis

Richard G. Ellis currently works as a Domino developer supporting several hundred classically crafted, Web-enabled applications. He has held positions as a programmer, systems administrator, technical manager and IT director in major commercial and university settings. Richard is certified as both a Domino developer and a Domino administrator.

Books From Packt


IBM Lotus Quickr 8.5 for Domino Administration
IBM Lotus Quickr 8.5 for Domino Administration

IBM Rational Team Concert 2 Essentials
IBM Rational Team Concert 2 Essentials

IBM Lotus Sametime 8 Essentials: A User's Guide
IBM Lotus Sametime 8 Essentials: A User's Guide

IBM WebSphere Application Server v7.0 Security
IBM WebSphere Application Server v7.0 Security

WS-BPEL 2.0 for SOA Composite Applications with IBM WebSphere 7
WS-BPEL 2.0 for SOA Composite Applications with IBM WebSphere 7

IBM Lotus Notes 8.5 User Guide
IBM Lotus Notes 8.5 User Guide

IBM Rational ClearCase 7.0: Master the Tools That Monitor, Analyze, and Manage Software Configurations
IBM Rational ClearCase 7.0: Master the Tools That Monitor, Analyze, and Manage Software Configurations

Getting Started with IBM FileNet P8 Content Manager
Getting Started with IBM FileNet P8 Content Manager


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software