Dynamic HTML table as an action bar

For a recent Web-based intranet project using R5, the users wanted the main data entry form to have an action bar. Easy enough, until the following factors were added:
1 - The Java applet was taking too long to load on the type of machines they have.
2 - The action bar needed to look like others on our intranet.
3 - We wanted to have as few graphics as possible to minimize loading time.
4 - We wanted to show only the buttons that were relevant to the individual user.
5 - The form was pretty long so the users wanted the same action bar at the top and bottom of the form.

In response, I developed a table as an action bar using a variable number of table cells as "buttons." The table combines elements of Domino, HTML and JavaScript. This technique uses a simplified version of the process as an example and only discusses items pertinent to the action bar.

First, I created a new form and went into the form properties to make sure "Generate HTML for all fields" was checked. Besides the data entry fields, I then added the following:
* A computed-when-composed field called "CreatedBy" to store the document's author's name
* A computed-when-composed field called "CreatedDept" to store the author's department (based on a lookup to the company Directory)
* A computed-for-display field called "User" to store the current user's name
* A computed-for-display field called "UserDept" to store the current user's department (also based on a lookup)
* A computed-for-display field called "UserRoles" to store the current user's role(s).

Next, I checked existing action bars on the Intranet so I could match the font style and size. For colors, we decided on white text on a blue background, which went along with the few graphics in the application. I created a style sheet by putting the following code into the HTML Head Content object on the form:

"<style type="	ext/css">" + @NewLine +
".actiontext {font-family: arial, sans-serif; font-size: 9pt; color: #FFFFFF; 
font-weight:bold; text-align:center; text-decoration:none; 
padding: 4px;}" + @NewLine +
".actioncell {background-color:#0000FF}" + @NewLine +
"</style>" 

Note that the "text-decoration:none" attribute removes the underline that normally appears for linking text.

Then I set up roles to help determine when a particular button is displayed. Users within the division have the ability to create a new Main document; this group has the role of "Staff." Department heads have the ability to add data to an existing Main document if it was created by someone in their department. This group was assigned the additional role of "DeptHead." Users from outside the division can only read documents and have no role assigned. I set up the Access Control List accordingly.

Of course, the buttons have to do something, so JavaScript code was written into the JS Header object. Names of functions are listed alphabetically, along with their descriptions:
closeDoc() -- this function returns the user to the previous view. It is usable by everyone.
editDoc() -- this function opens the document in edit mode. It is usable by department heads in the division.
mainDoc() -- the function creates a new Main document. It is usable by everyone in the division.
printDoc() -- this function prints the document. It is usable by everyone.
respondDoc() -- this function creates a response document to the original. It is usable by everyone in the division (except the document's author).

All the prep work done, I was able to get back to the form. I added a computed-for-display field called "ActionBar" to the top of the form and a computed-for-display field called "ActionBar_D" to the bottom. The formula in "ActionBar_D" is ActionBar so it will display whatever is in the ActionBar field. I'm using fields this way so I won't have to maintain two identical sets of pass-thru HTML code on the page.

The formula in the ActionBar field stored the HTML code that created the table on the fly. @If statements determined if a particular button displayed. The formula, with comments, became:

REM "The cellnum variable is based on the longest button text " ;
REM "to keep it on one line" ;
cellnum := 110 ;
REM "The cellspacingnum variable determines the space between the buttons" ;
cellspacingnum := 10 ;
REM "Set common attributes" ;
setstyle := "<td width=" + @Text(cellnum) + " class="actioncell"><a class="actiontext"" ;
REM "Set the HTML code for each button" ;
closebutton := setstyle  + "href="javascript:closeDoc();">Close</a></td>";
editbutton := setstyle  + "href="javascript:editDoc();">Edit</a></td>";
mainbutton := setstyle  + "href="javascript:mainDoc();">New Main</a></td>";
printbutton := setstyle  + "href="javascript:printDoc();">Print</a></td>";
respondbutton := setstyle  + "href="javascript:respondDoc();">Respond</a></td>";
REM "Set the circumstances to display variable buttons" ;
editoption := @If (@IsMember( "[DeptHead]" ; UserRoles) & CreatedDept = 
UserDept ; editbutton ; "") ;
mainoption := @If (@IsMember("[Staff]" ; UserRoles) ; 
mainbutton ; "") ;
respondoption := @If (@IsMember("[Staff]" ; UserRoles) & CreatedBy != User ; respondbutton ; "") ;
REM "Set the permanent buttons in a similar manner for consistency" ;
closeoption := closebutton ;
printoption := printbutton ;
REM "The table width formula assumes at least one button is always displayed " ;
REM "so the celltotals variable is not zero" ;
REM "Set the number of pixels based on the presence of the button" ;
closenum := @If (closeoption != "" ; cellnum ; 0 ) ;
editnum := @If (editoption != "" ; cellnum ; 0 ) ;
mainnum := @If (mainoption != "" ; cellnum ; 0 ) ;
printnum := @If (printoption != "" ; cellnum ; 0 ) ;
respondnum := @If (respondoption != "" ; cellnum ; 0 ) ;
celltotals := @Sum(closenum : editnum : mainnum : printnum : respondnum ) ;
REM "Account for the spaces between buttons" ;
numberofspaces := (celltotals / cellnum) -1;
cellspaceadj := numberofspaces * cellspacingnum ;
REM "Calculate the final table width based on the number of cells and the spaces between them" ;
tablewidth := celltotals + cellspaceadj ;
REM "Write the pass-thru HTML to display the action bar table" ;
REM "and arrange the buttons in the desired order" ;
"[<table align=center width=" + @Text(tablewidth) + " cellspacing=" + @Text(cellspacingnum)
 + " cellpadding=0 border=0><tr>" + mainoption + editoption + respondoption + 
printoption + closeoption + "</tr></table>]"