IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

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.

In the previous article by Richard G. Ellis, author of IBM Lotus Domino: Classic Web Application Development Techniques, we explored various view options for the web.

View templates are forms that can accommodate buttons, fields, and computed text as needed to enhance your views. Most views include a few Action buttons, so this article offers suggestions about including buttons on view templates. We will also take a look at adding style to views, opening documents in a separate window, and adding view scrollbars dynamically.

 

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

Provide view navigation buttons

Simple views intended to provide information (for example, a table of values) or links to a limited number of documents can stand alone quite nicely, embedded on a page or a view template. But if more than a handful of documents display in the view, you should provide users a way to move forward and backward through the view. If you use the View Applet, enable the scroll bars; otherwise add some navigational buttons to the view templates to enable users to move around in it.

Code next and previous navigation buttons

If you set the line count for a view, only that number of rows is sent to the browser. You need to add Action buttons or hotspots on the view template to enable users to advance the view to the next set of documents or to return to the previous set of documents—essentially paging backward and forward through the view.

Code a Next button with this formula:

@DbCommand("Domino"; "ViewNextPage")

Code a Previous button with this formula:

@DbCommand("Domino"; "ViewPreviousPage")

Code first and last buttons

Buttons can be included on the view template to page to the first and last documents in the view. Code an @Formula in a First button's Click event to compute and open a relative URL. The link reopens the current view and positions it at the first document:

@URLOpen("/"+@WebDbName+"/"+@Subset(@ViewTitle;-1) +
"?OpenView&Start=1")

For a Last button, add a Computed for Display field to the view template with this @Formula:

@Elements(@DbColumn("":"NoCache"; "" ; @ViewTitle; 1))

The value for the field (vwRows in this example) is the current number of documents in the view. This information is used in the @Formula for the Last button's Click event:

url := "/" + @WebDbName + "/" + @Subset(@ViewTitle;-1) ;
@URLOpen(url + "?OpenView&Start=" + @Text(vwRows))

When Last is clicked, the view reopens, positioned at the last document.

Please note that for very large views, the @Formula for field vwRows may fail because of limitations in the amount of data that can be returned by @DbColumn.

Let users specify a line count

As computer monitors today come in a wide range of sizes and resolutions, it may be difficult to determine the right number of documents to display in a view to accommodate all users. On some monitors the view may seem too short, on others too long.

Here is a strategy you might adapt to your application, that enables users to specify how many lines to display. The solution relies on several components working together:

  • Several Computed for display fields on the view template
  • A button that sets the number of lines with JavaScript
  • Previous and Next buttons that run JavaScript to page through the view

The technique uses the Start and Count parameters, which can be used when you open a view with a URL. The Start parameter, used in a previous example, specifies the row or document within a view that should display at the top of the view window on a page. The Count parameter specifies how many rows or documents should display on the page. The Count parameter overrides the line count setting that you may have set on an embedded view element.

Here are the Computed for display fields to be created on the view template. The Query_String_Decoded field (a CGI variable) must be named as such, but all the other field names in this list are arbitrary. Following each field name is the @Formula that computes its value:

  • Query_String_Decoded:

    Query_String_Decoded

  • vwParms:

    @Right(@LowerCase(Query_String_Decoded); "&")

  • vwStart:

    @If(@Contains(vwParms; "start="); @Middle(vwParms; "start=";
    "&"); "1")

  • vwCount:

    @If(@Contains(vwParms; "count="); @Middle(vwParms; "count=";
    "&"); "10")

  • vwURL:

    "/" + @WebDbName + "/"+ @Subset(@ViewTitle;1) + "?OpenView"

  • vwRows:

    @Elements(@DbColumn("":"NoCache"; ""; @ViewTitle; 1))

  • countFlag

    "n"

  • newCount:


    "1"

Add several buttons to the view template. Code JavaScript in each button's onClick event. You may want to code these scripts inline for testing, and then move them to a JavaScript library when you know they are working the way you want them to.

The Set Rows button's onClick event is coded with JavaScript that receives a line count from the user. If the user-entered line count is not good, then the current line count is retained. A flag is set indicating that the line count may have been changed:

var f = document.forms[0] ;
var rows = parseInt(f.vwRows.value) ;
var count = prompt("Number of Rows?","10") ;
if ( isNaN(count) | count < 1 | count >= rows ) {
count = f.vwCount.value ;
}
f.newCount.value = count ;
f.countFlag.value = "y" ;

The Previous button's onClick event is coded to page backward through the view using the user-entered line count:

var f = document.forms[0] ;
var URL = f.vwURL.value ;
var ctFlag = f.countFlag.value ;
var oCT = parseInt(f.vwCount.value) ;
var nCT = parseInt(f.newCount.value) ;
var oST = parseInt(f.vwStart.value) ;
var count ;
var start ;
if ( ctFlag == "n" ) {
count = oCT ;
start = oST - oCT ;
}
else {
count = nCT ;
start = oST - nCT ;
}
if (start < 1 ) { start = 1 ; }
location.href = URL + "&Start=" + start + "&Count=" + count ;

The Next button pages forward through the view using the user-entered line count:

var f = document.forms[0] ;
var URL = f.vwURL.value ;
var ctFlag = f.countFlag.value ;
var oCT = parseInt(f.vwCount.value) ;
var nCT = parseInt(f.newCount.value) ;
var start = parseInt(f.vwStart.value) + oCT ;
if ( ctFlag == "n" ) {
location.href = URL + "&Start=" + start + "&Count=" + oCT ;
}
else {
location.href = URL + "&Start=" + start + "&Count=" + nCT ;
}

Finally, if First and Last buttons are included with this scheme, they need to be recoded as well to work with a user-specified line count.

The @formula in the First button's Click event now looks like this:

count := @If(@IsAvailable(vwCount); vwCount; "10") ;
parms := "?OpenView&Start=1&Count=" + count ;
@URLOpen("/" + @WebDbName + "/" + @Subset(@ViewTitle;-1) + parms)
;7

The @formula in the Last button's Click event is also a little more complicated. Note that if the field vwRows is not available, then the Start value is set to 1,000. This is really more for debugging since the Start parameter should always be set to the value of vwRows:

start := @If(@IsAvailable(vwRows); @Text(vwRows); "1000") ;
count := @If(@IsAvailable(vwCount); vwCount; "10") ;
parms := "?OpenView&Start=" + start + "&Count=" + count ;
url := "/" + @WebDbName + "/" + @Subset(@ViewTitle;-1) ;
@URLOpen(url + parms) ;

Code expand and collapse buttons for categorized views

Two other navigational buttons should be included on the view template for categorized views or views that include document hierarchies. These buttons expand all categories and collapse all categories respectively:

  • The Expand All button's Click event contains this @Command:

    @Command([ViewExpandAll])

  • The Collapse All button's Click event contains this @Command:

    @Command([ViewCollapseAll])

Co-locate and define all Action buttons

Action Bar buttons can be added to a view template as well as to a view. If Action buttons appear on both design elements, then Domino places all the buttons together on the same top row. In the following image, the first button is from the view template, and the last three are from the view itself:

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

If it makes more sense for the buttons to be arranged in a different order, then take control of their placement by co-locating them all either on the view template or on the view.

Create your own Action buttons

As mentioned previously, Action Bar buttons are rendered in a table placed at the top of a form. But on typical Web pages, buttons and hotspots are located below a banner, or in a menu at the left or the right. Buttons along the top of a form look dated and may not comply with your organization's web development standards.

You can replace the view template and view Action buttons with hotspot buttons placed elsewhere on the view template:

  • Create a series of hotspots or hotspot buttons on the view template, perhaps below a banner.
  • Code @formulas for the hotspots that are equivalent to the Action Bar button formulas.
  • Define a CSS class for those hotspots, and code appropriate CSS rules.
  • Delete or hide from the Web all standard Action Bar buttons on the view template and on the view.
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.)

Adding style to views

Views within an application ought to be styled consistently. Inconsistent styling diminishes the user's experience and, to some extent, his productivity. If your views are similar, use the same style rules.

Style Domino default views

As previously noted, default views can be styled in Designer to some degree. With a little effort, column headings and data rows can be improved.

But compared with CSS styling options, styling with Designer alone is limited, indeed. Views can be improved dramatically with just a few CSS rules. Let us take a look at how this might be done. Here is the finished product:

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

Here are the steps to style default views with CSS:

Step 1: Add HTML <div> tags and JavaScript to the view template.

As in the following illustration, add HTML <div> tags marked as Pass-Thru HTML to the view template, along with some JavaScript at the bottom of the form. Division tags enclose the view title and the embedded view itself. This is the complete view template (not showing the Action buttons):

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

Step 2: Create and link to a page containing CSS rules.

Create a CSS page and link to it from the view template's HTML Head Content area. Add these CSS rules to the CSS style sheet:

/* ViewTemplate.css */
#viewtitle {
color: #7F0000;
font-family: Arial;
font-size: 18pt;
font-weight: bold;
margin-bottom: 10px;
padding-left: 10px;
}
#embeddedview table {
border-collapse: collapse;
border-top: solid 4px #EEE;
border-right: solid 4px #555;
border-bottom: solid 4px #555;
border-left: solid 4px #BBB;
font-family: Verdana;
font-size: 10pt;
}
#embeddedview th {
background-color: #DDD;
border: none;
border-bottom: solid 2px #7F0000;
color: Blue;
width: 8em;
}
#embeddedview a {
color: Red;
text-decoration: none;
}
#embeddedview a:hover {
background-color: Red;
color: White;
}

Step 3: Style the Action Bar buttons.

To style the Action Bar, link to the ActionBar.css page in the view template's HTML Head Content area, and insert the ActionBar.js JavaScript library into the JS Header. Details about Action Bar styling were presented in the article, IBM Lotus Domino: Adding Style to Form and Page Elements.

Style HTML views

HTML views can be styled with CSS rules as well. As the view template for an HTML view already contains a <table> tag, simply add an ID attribute, in this case dataTable:

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

In the view itself, add some class attributes to one or more of the column titles or column value formulas. For the Age column, here is a modified title including the class attribute:

<th class="age">Age</th>

And here is the column value for the Age column, again with the class attribute:

"<td class='age'>" + CustAge + "</td>"

Code CSS rules on a CSS page and link to it in the view template's HTML Head Content area. Note that the #dataTable ID name is used to qualify the <th> and <td> rules. This assures that these rules are applied only to the view table and not to other HTML tables that might exist on the view template:

#dataTable {
border-collapse: collapse ;
border: solid 2px black ;
}
#dataTable th {
background-color: yellow ;
color: blue ;
font-weight: bold ;
padding: 3px ;
text-align: left ;
text-style: italic ;
}
#dataTable td {
border: solid 1px black ;
padding: 3px ;
}
#dataTable th.age, td.age {
text-align: center ;
width: 4em;
}

And finally, the rendered view begins to look a little more polished:

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

Opening documents in a separate window

The main purpose of a view is to provide a list of documents that can be opened by clicking on entries in the view. By default, documents open in the same browser tab or window as the parent view. If you want documents to open in a new window or tab, here is how this can be done:

If a view is displayed using the $$ViewBody field on a view template, modify the formula that creates the document links by adding the target attribute to the <a> tag. Here, target='_blank' is added to the @formula for the Computed form field docURLItem as discussed in a previous topic:

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

If a view is displayed using an embedded view control, then specify _blank for the Frame attribute on the Info tab of Embedded View Properties:

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

Adding view scrollbars dynamically

It is possible to add scrollbars to Domino views without using the View Applet. This technique might be appropriate for views whose line count will not exceed the Maximum lines per view page server setting discussed earlier. In other words, if the server setting is 1000 and a view never exceeds 1,000 rows, then adding a scrollbar as described here might work well.

Again, there are several pieces to this solution which must work together. (For the purpose of this illustration, I simply duplicated records to create a larger number of documents.). To begin, here's the finished product:

IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

Here are the steps to add scrollbars to a view:

  1. Add <div> tags to the view template:
    Add two HTML divisions to the view template. The embeddedview division encloses the embedded view control, and the viewwrapper division encloses the embeddedview division. The viewwrapper division is the container to which the scrollbars attach. Here is the complete view template with HTML marked as Pass-Thru HTML:

    IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

  2. Code a CSS rule for the viewwrapper division:
    Add this CSS rule to your CSS style sheet. The background color of the viewwrapper division is set to a light gray (so that you can see it). The overflow attribute turns on the scrollbars:

    div#viewwrapper {
    background-color: #EEE ;
    padding: 0 ;
    overflow: auto ;
    }

  3. Set the line count for the embedded view:
    Set the line count for the embedded view on the Info tab of Embedded View Properties. Remember that this is the maximum number of rows that the view should ever contain, and it must be no larger than the number allowed by the server. In this example, the line count is set to 500:

    IBM Lotus Domino: Creating Action Buttons and Adding Style to Views

  4. Code a JavaScript function:
    Add this function to the JS Header or to a linked JavaScript library. When this function runs, it resets the height and width of the viewwrapper division to account for how the user may have adjusted the size and shape of his browser's window. Note that you may have to experiment a little with the values for height and width that are applied to the viewwrapper division by this function:

    function resizeView() {
    var ch = document.body.clientHeight ;
    var vw = document.getElementById("viewwrapper") ;
    vw.style.height = ch-200+"px" ;
    vw.style.width = "400px" ;
    }

  5. Code a JavaScript function call in the view template's HTML Body Attributes area:
    The onresize event fires whenever the user resizes the browser window. In the view template's HTML Body Attributes area, code the following @formula:

    "onresize='resizeView()'"

  6. Code a JavaScript function call in the onLoad form event:
    In the view template's onLoad event, add the following JavaScript function call. This sets the scrollbars in place when the view template first loads:

    resizeView()

Summary

In this article we took a look at suggestions about including buttons on view templates. We also took a look at adding style to views, opening documents in a separate window, and adding view scrollbars dynamically.


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