Editing fields in a Lotus Notes view with Ajax

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:

   
   "width="200" onClick="inLineEdit
   ('"+@Text(@DocumentUniqueID)+"', 'name')"
   >"+name+""
   

   Create another column and set the value as follows:

   
   "width="200" onClick="inLineEdit
   ('"+@Text(@DocumentUniqueID)+"',
   'designation')">"+designation+""
   

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

   
   
   Embed the Lotus Notes view just after this line. In the embedded element properties, select "Display using HTML."
      
   Just below that line, write a closing table tag:   
   
   Name
   
   Designation
      

8. Create a "New Employee" action in this form and make sure to give an action formula to compose a new document for the employee.

9. Open the employee view.

10. Create a new employee document and save it.

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

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

12. 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.

13. Write the code to execute this process.

14. 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.

15. 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.

16. 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
    

17. Finally, open the view and click on any field. You can then write some content and clicks onto the enter button.