InViewEdit on web

In my recent application, there are a few views that only have only a few columns (2-4 columns). In Lotus Notes client, you will have the InViewEdit feature. Since the most of the data are being be edited is in the view directly, I mimic the InViewEdit function for web views.

I've created a sample database to showcase this. I use "?ReadViewEntries" and prototype / AJAX to retrieve the XML viewentries. Another way to do it is to directly generate the html in the view itself. To keep things simple, in the view, the column name is the same and the fieldname. The form "Main" will retrieve the view and display it.

First create the layout for the view. From the XML, I traverse each viewentry and use "div" to generate each role each row. Each column data have their own id.

<div>
<span class="col0" id="e_0_0">William Be</span>
<span class="col1" id="e_0_1">012-3456789</span>
<span id="button0"><img class="editbutton" onclick="editEntry('0', '8F6')" src="pencil.jpg"></span>
</div>

Below is the sample result:



I've added button/image which will call the function to edit the row. It will pass the row number that is going to be edited and the notesid of the document. Textbox will be generated on the row. Then the button/image will change to confirm or cancel update.



Cancel will restore the original value (remove the textbox). Update will do an AJAX POST to an agent. The agent will update the appropriate document. Then it will return success or error message. If there's an error, the original value will be restored. If the agent return success status, the update value will be displayed (removing the textbox).

In the agent, instead of using XML for the return message, I use JSON. Sample JSON message

{status:"error",
msg:"Doc not found"}

In the javascript, use eval to set the JSON object into a variable. Check if there is an error, alert the user and exit the function. If not error, it will continue processing.

var data = eval('(' + req.responseText + ')');
if(data.status == "error"){
alert(data.msg);
resetEntry(eleNum, noteid);
return;
}

I prefer to use JSON because I find it easier to traverse the data compare to XML where more coding is needed.

The detail codes is in the sample database. You can download it here.

This is just a simple example. Using in view editing will definitely reduce some steps need to update data in documents. But there are things that need to be taken into consideration.

First is in view editing by multiple users. What will happen when one editor update the data, But another editor is at the same page which is still show the old data? What will happen is the second editor to edit the same document. I am working on implementing some checking for this. I will try to publish that when it's done. Drop me a line if you have any suggestions on this also.

In this example, it only uses text box. I will improve it by adding selection, date, name lookup, etc.

Definitely you will have to include some form of validation before posting the update. You won't want user to accidentally clear the field and save the update.

Anyway, download the sample and test it out. Drop me a line if you have any suggestion on improving it.

Show-n-Tell Thursday