The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

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
Also available in: Japanese

Activity: 4325 views
Comments:

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.

Close [x]

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.

Close [x]

Report abuse help

Report abuse

Report abuse submission failed. Please try again later.

Close [x]

developerWorks: Sign in

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

Close [x]

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

Rate this article

Comments

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=