Making Web applications act like Notes applications

Dean Menzel, Presented by Lotus Software, IBM Corporation

Dean Menzel is a contributor to the Lotus Developer Domain. LDD is the premier technical Web site for Lotus software products.

Summary: This tip shows you how to script the JavaScript onDblClick and onKeyPress events to edit a document when it is double-clicked and to close a document when the Escape key is pressed, just like a Notes application.

Tag this!

Date: 01 Aug 2002
Level: Introductory
Activity: 1732 views

Make your Web applications behave like your Notes applications! Use the JavaScript onDblClick and onKeyPress events to edit a document when it is double-clicked and to close a document when the Escape key is pressed. To do this, we'll add code to the HTML Body Attributes and HTML Head Content objects. Then we'll create four hidden Computed-for-Display text fields on the form to process the code.

Note: The following code works only in Microsoft Internet Explorer 5.5 and later. Make sure that URLs in your application use the Domino URL command syntax format. For example, a document in read mode in the Web browser must have the ?OpenDocument URL command in the URL.

In Domino Designer, open a form in your Web application, and then select the HTML Body Attributes in the Objects window. Copy and paste the following code:

"onKeyPress=\"pageOnKeyPress()\" onDblClick=\"pageOnDblClick()\"

The onKeyPress and onDblClick events appear in the opening <BODY> tag, so if you double-click anywhere in the document, the document opens in edit mode. When you press the Escape key while in edit mode, a message prompts you to save the document.

In the HTML Head Content, copy and paste the following code:

pathparts:=@Explode(@Middle(path_info;0;"?");"/");				
ViewPath:=@Implode(@Subset(pathparts;@Elements(pathparts)-1);"/") + 
"?openview";
				
"<SCRIPT>" +

   "function pageOnKeyPress(){" +
   @If(!allowedToEdit;"return";"")+
   "/* ESC key pressed */ " +
   "if(event.keyCode==27){" +
      @If(@IsDocBeingEdited;
         "if(confirm(\"Do you wish to save?\"))document.forms[0].
         submit();else return;";
         "var thisRef=location.href.toLowerCase();"+
         "if(thisRef.indexOf(\"openview\")==-1)location.href='/"+
         ViewPath+"'"
         ) +
      "}" +
   "}" +

   "function pageOnDblClick(){" +
   "location.href='"+@Middle(path_info;0;"?")+"?"+@ReplaceSubstring(@LowerCase
   (query_string);"opendocument";"editdocument")+"';" + "}" +

"</SCRIPT>"

The JavaScript for the onKeyPress and onDblClick events is dynamically calculated using formula language. The pageOnKeyPress() function is dynamically calculated depending on whether the page is in read or edit mode. If you are in read mode, pressing the Escape key sends you back to the original view. If you are in edit mode, you are prompted to save the document.

After you add the code to the HTML Head Content and HTML Body Attributes, you need to create several fields on the form to process the code.

The first two fields are path_info and query_string. These fields are used to determine the correct Domino URL command syntax and URLs for the Web browser. Create two hidden Computed-for-Display text fields on your form and name them path_info and query_string, respectively. List the field names in the Programmer's pane as the values of the fields.

Create a third hidden Computed-for-Display field on the form called $$Return. Copy and paste the following code into the Programmer's pane as the field's value:

thisDBFilePath:=@ReplaceSubstring(@Subset(@DbName;-1);"\\";"/");
				
   @If(@Contains(@LowerCase(query_string);"savedocument");
				
      "["+path_info+"?"+@ReplaceSubstring(@LowerCase(query_string);
      "savedocument";"opendocument")+"]";
      "["+thisDBFilePath+"/default/"+@Text(@DocumentUniqueID)+"?opendocument]")

Add the fourth, and last, hidden Computed-for-Display text field to the form; call it allowedToEdit. Then in the Programmer's pane, add an @True formula for the field value. The allowedToEdit field determines if the user has the double-click event available to open the document in edit mode. The formula for allowedToEdit evaluates to either @True or @False and can be calculated from any ACL security model.

For experienced Notes client users, these modifications to your Web applications make using the Web much more palatable than always having to find and click a button to perform an action.

About the author

Dean Menzel is a contributor to the Lotus Developer Domain. LDD is the premier technical Web site for Lotus software products.

Comments (Undergoing maintenance)

Trademarks | My developerWorks terms and conditions

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=Lotus

ArticleID=12785

ArticleTitle=Making Web applications act like Notes applications

publish-date=08012002

author1-email=

author1-email-cc=