InViewEdit on the Web using JavaScript, XML and XMLHTTP

The purpose of this tip is to implement InViewEdit on web. This code gives you flexibility to edit document contents without opening their underlying form on web. In this code I have used XMLHTTP to update backend document after editing so I can prevent page refreshing on web.

Here, though, I do not know how to attached sample database; otherwise I would attach them. For any details, please feel free to e-mail me.

//Global variables
var globalCust_Name=""
var globalCust_Email=""
var globalCust_Dept=""
var globalCust_Grp_ID=""
var globalCust_Chief=""
var Length = -1

function getHTML(noteid,Cust_Name,Cust_Email,
Cust_Dept,Cust_Grp_ID,Cust_Chief,ClickText)
{
    var arrTemp
   var strSearchString=""
 Cust_Name=unescape(Cust_Name)
 Cust_Email=unescape(Cust_Email)
 Cust_Dept=unescape(Cust_Dept)
 Cust_Grp_ID=unescape(Cust_Grp_ID)
 Cust_Chief=unescape(Cust_Chief)
 
     if(ClickText=="Edit")
 { 

      var DbName=document.forms[0].DBPath.value;
      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   xmlDoc.async="false";
     xmlDoc.load("/"+DbName+'/'+viewName+
'?Readviewentries&restricttocategory='+Cust_Grp_ID+'&Count=-1');
     var nodeResult = xmlDoc.selectNodes("/viewentries")[0];
     if (nodeResult == null) 
     { 
   return false
  }
     Length = parseInt(nodeResult.getAttribute("toplevelentries"))
     if (isNaN(Length))
     {
      Length = 0
     } 
  arrTemp  =

 "<Select name='Cust_Dept'>"
  for(var intIndex=0;intIndex<parseInt(Length);intIndex++)
  {
   arrTemp  += "<Option value="" + 
eval('nodeResult.childNodes['+intIndex+'].
childNodes(0).text') + "">" + eval('nodeResult.childNodes
['+intIndex+'].childNodes(0).text') + "</Option>" 
  }
  arrTemp += "</Select>"
  selectedVal = document.getElementById
(noteid+'td3').innerText
  oldVal = "<Option value=""+selectedVal+"">"+
selectedVal+"</Option>"
  replaceVal = "<Option value=""+selectedVal+"" 
Selected>"+selectedVal+"</Option>"
  arrTemp = arrTemp.replace(oldVal,replaceVal)
  
  globalCust_Name=Cust_Name
  globalCust_Email=Cust_Email
  globalCust_Dept=Cust_Dept
  globalCust_Grp_ID=Cust_Grp_ID
  globalCust_Chief=Cust_Chief
  Col_Cust_Name= "<div id=" + noteid + 
"td1><input type='text' size=10 id=
'Cust_Name' value=""+ Cust_Name + ""></div>"
  Col_Cust_Email= "<div id=" + noteid + 
"td2><input type='text' size=10  id=
'Cust_Email' value="" + Cust_Email + ""></div>" 
  Col_Cust_Dept= "<div id=" + noteid +
 "td3>"+arrTemp+"</div>"
  Col_Cust_Grp_ID= "<div id=" + noteid + 
"td4><input type='text' size=10 id='Cust_Grp_ID' value=
"" + Cust_Grp_ID+ ""></div>"
  Col_Cust_Chief= "<div id=" + noteid +
 "td5><input type='text' size=20 id='Cust_Chief' 
value="" + Cust_Chief + ""></div>"
  Col_ClickText= "<div id=" + noteid + 
"td6><input type='button' value='Ok' 
id='OkBtn' style='width:30px;border:0px;cursor:hand' 
onclick=Javascript:setHTML(""+noteid+"")><input type='button'
 value='Cancel' id='CancelBtn' style='width:30px;border:0px;
cursor:hand' onclick=Javascript:getOldValue
(""+noteid+"")></div>" 
  butDisable("EditBtn",true); 
 }

 if (ClickText=="OK")
 {
  
      butDisable("EditBtn",false); 
    if ( globalCust_Name != Cust_Name || 
globalCust_Email !=Cust_Email || 
globalCust_Dept !=Cust_Dept || globalCust_Grp_ID !=
Cust_Grp_ID ||  globalCust_Chief !=Cust_Chief )
  {
    if(document.forms[0].MDocUid.value=="")
   {
    document.forms[0].MDocUid.value=noteid
    document.forms[0].MCust_Name.value=Cust_Name
    document.forms[0].MCust_Email.value= Cust_Email
    document.forms[0].MCust_Dept.value=Cust_Dept
    document.forms[0].MCust_grp_ID.value=Cust_Grp_ID
    document.forms[0].MCust_Chief.value=Cust_Chief
   }
  } 
       RetunXMLResult=runAgent
("UpdateInlineDocXML", BuildXMLVariables()); 
    
    if (trimString (RetunXMLResult) == "Success")
     {  
     window.status="Document is updated sucessfully" 
     doc.MDocUid.value=""
         }
         else
         {
          // To handle author fields in a document
          window.status="
You are not authorized to update this document"
             getOldValue(noteid)
          return false
         }

//Clear exisitng values from global variables
    globalCust_Name =""
    globalCust_Email =""
    globalCust_Dept=""
    globalCust_Grp_ID=""
    globalCust_Chief=""
   
    Col_Cust_Name=Cust_Name
    Col_Cust_Email=Cust_Email
    Col_Cust_Dept=Cust_Dept
    Col_Cust_Grp_ID=Cust_Grp_ID
    Col_Cust_Chief=Cust_Chief
    Col_ClickText= "<div id=" + noteid + 
"td6><input type='button' value='Edit' 
id='EditBtn' style='width:30px;border:0px;cursor:hand' 
onclick=Javascript:getHTML("" + noteid+"",""+escape(Cust_Name)
+"",""+escape(Cust_Email)+"",""+escape(Cust_Dept)
+"",""+escape(Cust_Grp_ID
)+"",""+escape(Cust_Chief)+"",'Edit')></div>"
        butDisable("EditBtn",false)
        }
// Changing the inner HTML of the exisitng table 
which is generated by domino       

document.getElementById(noteid + "td1").
innerHTML=Col_Cust_Name
document.getElementById(noteid + "td2").
innerHTML=Col_Cust_Email
document.getElementById(noteid + "td3").
innerHTML=Col_Cust_Dept
document.getElementById(noteid + "td4").
innerHTML=Col_Cust_Grp_ID
document.getElementById(noteid + "td5").
innerHTML=Col_Cust_Chief
document.getElementById(noteid + "td6").
innerHTML=Col_ClickText
 }

function setHTML(noteid)
{
 var Cust_DeptNewVal = ""
 if ( Length > 0 )
 {
  Cust_DeptNewVal =
 document.getElementById('Cust_Dept').
options[document.getElementById('Cust_Dept').
selectedIndex].value
 }
 getHTML(noteid,escape(document.getElementById
('Cust_Name').value),escape(document.getElementById
('Cust_Email').value),Cust_DeptNewVal,escape
(document.getElementById('Cust_Grp_ID').value),
escape(document.getElementById('Cust_Chief').value),'OK')
}


// Function used for disable edit link 
function butDisable(id,flag)
{
  // var oObject = document.all.item(id);
    var oObject = document.getElementsByName(id);
    if (oObject != null)
                {
                    if (oObject.length != null)
                   {
                           for (i = 0; i < oObject.length; i++)
       {
                                      oObject(i).disabled=flag;
            }
         }   
      }
}

function getOldValue(noteid)
{
     document.getElementById(noteid + "td1").
innerHTML=globalCust_Name
     document.getElementById(noteid + "td2").
innerHTML=globalCust_Email
     document.getElementById(noteid + "td3").
innerHTML=globalCust_Dept
     document.getElementById(noteid + "td4").
innerHTML=globalCust_Grp_ID
     document.getElementById(noteid + "td5").
innerHTML=globalCust_Chief
     Col_ClickText= "<div id=" + noteid +
 "td6><input type='button' value='Edit' id='EditBtn' 
style='width:30px;border:0px;cursor:hand' 
onclick=Javascript:getHTML("" + noteid+"",""
+escape(globalCust_Name)+"",""+escape
(globalCust_Email)+"",""+escape(globalCust_Dept)+"",
""+escape(globalCust_Grp_ID
)+"",""+escape(globalCust_Chief)+"",'Edit')></div>"
     document.getElementById(noteid + "td6").
innerHTML=Col_ClickText
     butDisable("EditBtn",false); 

}

//Used to call agent from XML

function runAgent(strAgentName, XMLvariables) 
{
 var DBPath=doc.DBPath.value;
 objHTTP = new ActiveXObject("Microsoft.XMLHTTP");
 strURL="/"+DBPath+"/"+strAgentName+"?OpenAgent"
 objHTTP.open("POST", strURL, false, "", "");
 objHTTP.setRequestHeader("Content-type", 
"application/x-www-form-urlencoded");
 objHTTP.send(XMLvariables);
 resp = objHTTP.responseText;
 objHTTP = null;
 return resp
}

// Used to make XML elements

function BuildXMLVariables()
{
 var objDOM = new ActiveXObject("Microsoft.XMLDOM")

 RootEl = objDOM.createNode(1, "RootElement", "")
 objDOM.documentElement = RootEl

 // add as many of these nodes as you need. 
 // these variables will be accessible via the agent.
 objHeaders = objDOM.createNode(1, "MDocUid", "")
 objHeaders.text = document.all.MDocUid.value
 RootEl.appendChild(objHeaders)

 objHeaders = objDOM.createNode(1, "MCust_Name", "")
 objHeaders.text = document.all.MCust_Name.value
 RootEl.appendChild(objHeaders)

 objHeaders = objDOM.createNode(1, "MCust_Email", "")
 objHeaders.text = document.all.MCust_Email.value
 RootEl.appendChild(objHeaders)

 objHeaders = objDOM.createNode(1, "MCust_Dept", "")
 objHeaders.text = document.all.MCust_Dept.value
 RootEl.appendChild(objHeaders)
 
 objHeaders = objDOM.createNode(1, "MCust_Chief", "")
 objHeaders.text = document.all.MCust_Chief.value
 RootEl.appendChild(objHeaders)
 
 objHeaders = objDOM.createNode(1, "MCust_grp_ID", "")
 objHeaders.text = document.all.MCust_grp_ID.value
 RootEl.appendChild(objHeaders)
 
 return objDOM;
}

//To trim the strings

function trimString (str) 
{
   return str.replace(/^s+/g, '').replace(/s+$/g, '');
}
=====Updatedocument agent=====
Sub Initialize
 
 On Error Goto errHandler
 
 Print |Content-type:text|
 
 Set nsThisSession = New NotesSession 
 Set ndbThisDatabase = nsThisSession.CurrentDatabase         
 Set ndocThisDocument = 
nsThisSession.DocumentContext 
 
 
 Set objDoc = CreateObject("Microsoft.XMLDOM")
 objDoc.async = False
 objDoc.validateOnParse = False
 
 objDoc.loadXML
( ndocThisDocument.Request_Content(0))
 
 ' geting forms hidden fields value after 
editing fields through InViewEdit
 
 txtDocumentID = objDoc.
getElementsByTagName("MDocUid")(0).text
 txtCust_Name=objDoc.
getElementsByTagName("MCust_Name")(0).text
 txtMCust_Email=objDoc.
getElementsByTagName("MCust_Email")(0).text
 txtMCust_Dept=objDoc.
getElementsByTagName("MCust_Dept")(0).text
 txtMCust_Chief=objDoc.
getElementsByTagName("MCust_Chief")(0).text
 txtMCust_grp_ID=objDoc.
getElementsByTagName("MCust_grp_ID")(0).text
 
 Set CustDoc=ndbThisDatabase.
GetDocumentByUNID(txtDocumentID)
 
 If txtDocumentID="" Then
  Print "No update needed"
  Exit Sub
 End If
 ' geting document handle 
 
 If CustDoc Is Nothing Then
  Print "Error in geting document handle"
  Exit Sub
 End If
 
 ' Updating corresponding fields in a form 
 
 With CustDoc
  Call .ReplaceItemValue("Cust_Name",txtCust_Name)
  Call .ReplaceItemValue("Cust_Email",txtMCust_Email)
  Call .ReplaceItemValue("Cust_Dept",txtMCust_Dept)
  Call .ReplaceItemValue("Cust_Grp_ID",txtMCust_Chief)
  Call .ReplaceItemValue("Cust_Chief",txtMCust_grp_ID)
  Call .Save(True,False)
 End With
 
 ' return sucess when document is saved successfully
 
 Print "Success"
 
 Exit Sub
 
errHandler:
 ' return error  when document is saved successfully
 Print "Error"
 Exit Sub 
End Sub
=====write this code in view's first column======
DocUID:=@Text(@DocumentUniqueID);
"<div id="+DocUID+"td1>"+@If
(Cust_Name="";"-";Cust_Name) +"</div>"
=====write this code in view's second column======
DocUID:=@Text(@DocumentUniqueID);
"<div id="+DocUID+"td2>"+@If
(Cust_Email="";"-";Cust_Email)+"</div>"
=====write this code in view's third column======
DocUID:=@Text(@DocumentUniqueID);
"<div id="+DocUID+"td3>"+@If(Cust_Dept="";"-
";Cust_Dept)+"</div>"
=====write this code in view's fourth column======
DocUID:=@Text(@DocumentUniqueID);
"<div id="+DocUID+"td4>"+@If(Cust_Grp_ID="";"
-";Cust_Grp_ID)+"</div>"
=====write this code in view's fifth column======
DocUID:=@Text(@DocumentUniqueID);
"<div id="+DocUID+"td5>"+@If(Cust_Chief="";"
-";Cust_Chief)+"</div>"
=====write this code in view's six column======
DocUID:=@Text(@DocumentUniqueID);
v_Cust_Name:=@If(Cust_Name="";"-";
@ReplaceSubstring(Cust_Name;"'";"\'"));
v_Cust_Email:=@ReplaceSubstring
(Cust_Email;"'";"\'");
v_Cust_Dept:=@If(Cust_Dept="";"-";
@ReplaceSubstring(Cust_Dept;"'";"\'"));
v_Cust_Grp_ID:=@If(Cust_Grp_ID="";"-";
@ReplaceSubstring(Cust_Grp_ID;"'";"\'"));
v_Cust_Chief:=@If(Cust_Chief="";"-";
@ReplaceSubstring(Cust_Chief;"'";"\'"));
"<div id="+DocUID+"td6><input type='button' 
value='Edit' id='EditBtn' style='width:30px;
border:0px;cursor:hand' onclick="
Javascript:getHTML('"+DocUID+"','"+v_Cust_Name+"','"+
v_Cust_Email+"','"+v_Cust_Dept+"','"+
 v_Cust_Grp_ID+"','"+v_Cust_Chief+"','Edit')"></div>"
  

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

This tip was submitted to the SearchDomino.com tip exchange by member Rishikesh Sahi. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our bimonthly tip contest and you could win a prize and a spot in our Hall of Fame.

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.