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.

More Ajax resources: Ajax Learning Guide A single form to edit and view any Lotus Notes document Ajax for Lotus Notes and Domino Reference Center

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:

   
   "<tr><td id="name"  style="cursor:hand" 
   width="200" onClick="inLineEdit
   ('"+@Text(@DocumentUniqueID)+"', 'name')"
   >"+name+"</td>"
   

   Create another column and set the value as follows:

   
   "<td id="designation"  style="cursor:hand" 
   width="200" onClick="inLineEdit
   ('"+@Text(@DocumentUniqueID)+"', 
   'designation')">"+designation+"</td></tr>"
   

7. Create a form called "$$ViewTemplate for EmployeeView" and write this pass-through HTML code:

   
   <table><tr><td width="200">
   Name</td><td width="200">
   Designation</td></tr>
   

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:

   </table>

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:

    
    var editing=false;
    var xmlHttpRequest; 
    function inLineEdit(documentId, fieldName){
     if (editing) return;
     var obj = window.event.srcElement;
     while(obj.tagName!="TD")
      obj=obj.parentNode;
     var x = obj.innerHTML
    var y = document.createElement('TEXTAREA');
    y.setAttribute("DOCUMENTID", documentId);
     y.setAttribute("FIELD", fieldName);
     y.setAttribute("id", "AJAX");
     y.onkeypress=processKeyEvent;
     y.value=x;
     while (obj.hasChildNodes())
     {
       obj.removeChild(obj.firstChild);
     }
     obj.appendChild(y);
     y.focus();
     editing=true;
    }
    

    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:

    
    function processKeyEvent(){
     
    if(window.event.keyCode==13){
    if(window.XMLHttpRequest){
    xmlHttpRequest=new XMLHttpRequest();
    }else if(window.ActiveXObject){
    xmlHttpRequest=
    new ActiveXObject("Microsoft.XMLHTTP");
     }  
    var url=location.href;
    if(url.toUpperCase().indexOf(".NSF")!=-1)
    url=url.substring(0, url.toUpperCase().
    indexOf(".NSF")+4);
    else if(url.toUpperCase().
    indexOf(".NTF")!=-1) 
    url=url.substring(0, 
    url.toUpperCase().indexOf(".NTF")+4);
     
    var y = document.getElementById("AJAX"); 
    var id=y.getAttribute("DOCUMENTID");
    var value=y.innerHTML;
    var fieldName=y.getAttribute("FIELD");
    url=url+"/(UpdateViaAjax)?OpenAgent&id="
    +id+"&value="+value+"&field="+fieldName+""; 
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange=callback;
    xmlHttpRequest.send(null);
     }
    }
    

    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:

    
    function callback(){
    if(xmlHttpRequest.readyState==4){ 
    var y = document.getElementById("AJAX");
    var result=y.innerHTML;
    var newElement=document.
    createTextNode(result);
    var parent=y.parentNode;
    while(parent.tagName!="TD")
    parent=parent.parentNode;
    while (parent.hasChildNodes())
     {
    parent.removeChild(parent.firstChild);
      }
    parent.appendChild(newElement);
    editing=false;
     }
    }
    

    This function just replaces the text area with the text node. Now we have to write the real agent that updates the content. 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:

    
    Dim session As New NotesSession
    Dim db As NotesDatabase
    Dim doc As NotesDocument
    Dim query As String
    Dim id As String
    Dim fieldValue As String
    Dim fieldName As String
    Dim colDoc As NotesDocument 
    
    Set db=session.CurrentDatabase
    Set doc=session.DocumentContext
    query= doc.Query_String_Decoded(0) 
    query=Strright(query, "&id=")
    id=Left(query, Instr(query, "&value=")-1)
    query=Strright(query, "&value=")
    fieldValue=Left(query, Instr(query, "&field=")-1)
    query=Strright(query, "&field=")
    fieldName=query
    
    Set colDoc=db.GetDocumentByUNID(id)
    If Not colDoc Is Nothing Then
    Call colDoc.ReplaceItemValue(fieldName, 
    fieldValue)
    Call colDoc.Save(False, False)
    End If
    

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.

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.