dominoGuru.com
Your Development & Design Resource
NotesDocument READ and UPDATE with AJAX calls to Domino Agents (or Simple Inline View Editing over the web) - Build, Demo, and Download
09/22/2009 10:30 AM by Chris Toohey
Building off of my example from yesterday, I thought that I would show you how we can quickly and easily create READ and UPDATE functions for NotesDocuments via calls to our (modified) HTTP Request Consumer Domino Agents. And, to spice things up, I thought I'd do it all via AJAX.
Build Synopsis
That's the end-goal - a simple NotesData table that will allow us to change the Status of a given NotesDocument.
To get to that goal, I'll take the Agent Design Elements from yesterday - creating one for the READ and another for the UPDATE function. But first I need to ready the Page Design Element that acts as the Default Launch Object for the NotesDatabase, which will act as the display for our NotesData table.
Phase One: index.html Page Design Element
The index.html Page Design Element - just like with yesterday's example - is extremely simple by design: I want to focus your attention to the functional capabilities of having your Web Applications (Domino or non-Domino technologies-based) interacting with the HTTP Request Consumer Agents.
We'll focus on the HTML Form Element and the JavaScript functions, as the rest of the HTML markup is either descriptive/introduction or my Paypal Donation stuff.
The HTML Form Element contains the following markup:
<form action="#" name="moddocs" id="moddocs" method="GET">
<div id="viewbody"> </div>
<script>getdocs(document.getElementById("viewbody"));</script>
</form>
The JavaScript functions - there are two - are:
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function getdocs(target) {
http.open("GET", "getdocs.agent?open", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
target.innerHTML = http.responseText;
}
}
http.send(null);
}
function moddoc(val, UNID) {
http.open("GET", "status.agent?open&status=" + val + "&UNID=" + UNID,
true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
getdocs(document.getElementById("viewbody"));
}
}
http.send(null);
}
getdocs()
simply grabs getdocs.agent Agent Design
Element-generated markup and sets the innerHTML
of the passed-thru
HTML Object (via an AJAX call). moddoc()
passes two values to the
status.agent Agent Design Element: the new value of the
status NotesItem and the target NotesDocument UNID (again, via AJAX).
When it's complete, it runs another AJAX call to getdocs()
to
refresh the NotesData table.
All I need to do from here is make sure that my NotesData table has the
markup it needs that wires into the moddoc()
. Pretty simple, as
via the getdocs()
function I have absolute control over what's
returned to the Web Browser Client.
Phase Two: HTTP Request Consumer Agents
The getdocs()
and moddoc()
simply require a
modification to their respective Initialize
subroutines to both
deliver and update our NotesDocuments.
getdocs.agent Agent Design Element - Initialize
status.agent Agent Design Element - Initialize
... and that's it. The getdocs.agent
Agent Design Element
generates the markup that we need: the onchange event of each SELECT
HTML Element passes the newly-selected value and the target NotesDocument
Unique ID to the moddoc()
JavaScript function, which calls our
status.agent Agent Design Element. This processes the request - using
the submitted UNID and status parameter values to find the
target NotesDocument and update said NotesDocument status NotesItem
respectively.
After that, we simply "refresh" the UI via another AJAX call... and we're done.
Online Demo, Example Download, and Closing Remarks
Again, for those of you who prefer an online demo complete with downloadable example, I've got you covered.
The code written in this series is - how should I put this - not ideal. In a "best practices" scenario here, you'd want to return something like JSON, and parse that JSON return locally. This code is about as simplified and straight forward as it gets - I didn't do anything that would subtract from the goal of this article: getting you to understand just what you can do with an HTTP Request Consumer Agent Design Element.
Hopefully, this is a simple enough showcase that you'll start delving into this practice yourself - regardless of your comfort level with LotusScript, JavaScript, HTML Method calls, and AJAX. It's really powerful stuff here, and your web applications will definitely benefit from the overall approach.
Notice I said web applications - which is the second time in this article that I haven't prefixed Domino as normal. I use this approach with Flash-based Banner Ads, simple HTML Forms hosted on IIS and Apache, and countless other scenarios. It's ultimately no different than using Google Web Services or any other SaaS or Cloud service. I take that back actually - using this approach, you can quickly and near-immediately bring Lotus Notes Client-only applications onto the Web and Mobile Browser Clients: simply point the target NotesDatabase to a different NotesDatabase, Domino Server, etc. and you have yourself a very powerful NotesData proxy on your hands...