Editing fields in a Lotus Notes view with Ajax

Have you ever considered editing fields in a Lotus Notes view directly, as opposed to opening the Lotus Notes document in a pop-up window, editing it and then saving it again? Ajax achieves this task nicely without ever refreshing the page.

Here are the steps to follow this task, which I've tested in Internet Explorer 6.

1. Create a new Lotus Notes database with Ajax.

2. Create a form called "Employee." Then, create two text fields called "Name" and "Designation."

3. Next, create two action buttons and call them "Save and Close" and "Edit." Give the necessary action formulas and hide-when properties for these buttons and then save the form.

4. Create a Lotus Notes view named "EmployeeView." Add the selection formula "Form="Employee"."

5. In your view properties, check off "Treat view content as HTML," then create a column.

6. Set the column value as follows:

   Create another column and set the value as follows:

7. Create a form called "$$ViewTemplate for EmployeeView" and write this pass-through HTML code:
8. Embed the Lotus Notes view just after this line. In the embedded element properties, select "Display using HTML."

9. Just below that line, write a closing table tag:
10. Create a "New Employee" action in this form and make sure to give an action formula to compose a new document for the employee.

11. Open the employee view.

12. Create a new employee document and save it.

13. Make sure that the Lotus Notes document is appearing properly in the view.

    Now we have to write the JavaScript function "inLineEdit."

14. Create a new function in the JavaScript Header of the "$$ViewTemplate" form and write the following code:

    This function creates a text area object, sets the value and replaces the text. It also sets "global editing variables" editing and "XMLHttpRequest." Editing variable is used to ensure that only one field is edited at a time.

    "XMLHttpRequestObject" is a JavaScript object which allows interaction with the Lotus Domino server. It ensures that when clicking on any of the field values, a text area object appears.

15. Write the code to execute this process.

16. To make things simpler, we will save the value when the user clicks on the enter button. In "inLineEdit," we are calling the "processKeyEvent" function. Create this function and write this code:

    The above function creates the "XMLHttpRequest" object and calls an agent called "UpdateViaAjax" by passing the field name, text area content and unique document ID.

17. We should be able to get the response from an agent in the "callback function." Then write the following function:

    This function just replaces the text area with the text node. Now we have to write the real agent that updates the content. ...
    

    To continue reading for free, register below or login

    Requires Membership to View

    To gain access to this and all member only content, please provide the following information:

    Email Address:
    
    
    

    By joining SearchDomino.com you agree to receive email updates from the TechTarget network of sites, including updates on new content, magazine or event notifications, new site launches and market research surveys. Please verify all information and selections above. You may unsubscribe at any time from one or more of the services you have selected by editing your profile or unsubscribing via email.
    
    TechTarget cares about your privacy. Read our Privacy Policy
    To read more you must become a member of SearchDomino.com

    As an existing member of the TechTarget network please activate your SearchDomino.com account 

    By joining SearchDomino.com you agree to receive email updates from the TechTarget network of sites, including updates on new content, magazine or event notifications, new site launches and market research surveys. Please verify all information and selections above. You may unsubscribe at any time from one or more of the services you have selected by editing your profile or unsubscribing via email.
    
    TechTarget cares about your privacy. Read our Privacy Policy
    
    
    

    Digg This!     StumbleUpon     Del.icio.us

    
    
    
    

    RELATED CONTENT Ajax for Lotus Notes Domino Top 10 Lotus Notes Domino programming and development tips of 2007 Ajax for Lotus Notes Domino Ajax code equivalent of the @DBColumn formula for Lotus Notes A bevy of Notes/Domino development tips A smorgasbord of Notes/Domino development tips Latest Ajax tools from Nexaweb target SOA, Web 2.0 Delete documents over the Web using Ajax and JavaScript Ajax threats worry researchers New chapter and verse on Ajax security App security tools target Ajax vulnerabilities Lotus Notes Domino Agents How the Agent Profiler tool improves Notes/Domino performance Run or restart Notes/Domino agents via text messages Calculating results for a column in a Lotus Notes view Approve Lotus Notes documents using a BlackBerry mobile device LotusScript agent indexes Lotus Notes/Domino databases Top 10 Lotus Notes/Domino coding and development tips of 2008 Open documents in Lotus Notes from the Web without a UNID Fix and update Lotus Notes documents with limited access Verify scheduled agent status with Domino Extensible Language (DXL) Top 10 Lotus Notes Domino programming and development tips of 2007 Agent Run or restart Notes/Domino agents via text messages Approve Lotus Notes documents using a BlackBerry mobile device LotusScript agent indexes Lotus Notes/Domino databases Open documents in Lotus Notes from the Web without a UNID Fix and update Lotus Notes documents with limited access Verify scheduled agent status with Domino Extensible Language (DXL) How to export data from a Lotus Notes database to a CSV file Enable or disable scheduled agents without opening the Lotus Notes database design Creating custom views in Lotus Notes databases How to automatically create a backup copy of your Domino Directory

    RELATED RESOURCES 2020software.com, trial software downloads for accounting software, ERP software, CRM software and business software systems Search Bitpipe.com for the latest white papers and business webcasts Whatis.com, the online computer dictionary

    
    
    The agent is simple -- it returns the reference of the Lotus Notes document using a universal ID and updates the field with the content of the text area.

18. Create an agent called "UpdateViaAjax" and set the agent runtime property as "agent list selection." Then write the following code:
19. Finally, open the view and click on any field. You can then write some content and clicks onto the enter button.

Do you have comments on this tip? Let us know.

This tip was submitted to the SearchDomino.com tip library by member Jinoy George. Please let others know how useful it is via the rating scale below. Do you have a useful Lotus Notes, Domino, Workplace or WebSphere tip or code snippet to share? Submit it to our monthly tip contest and you could win a prize.

Rate this Tip To rate tips, you must be a member of SearchDomino.com. Register now to start rating these tips. Log in if you are already a member. DISCLAIMER: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.