ProjectDX.org

Following on from the first in this series, this article will go through the HTML and Javascript involved in displaying the form, taking the data entered and then using javascript creating an xml document to send to Domino.

HTML

As mentioned previously, the HTML is stored 'raw' within the 'contact_form.htm' page element which is in the 'XMLReceive.nsf' database design.

It is very simple and starts with the following DOCTYPE declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Reference to the Javascript code is made here:

The submit button is coded here and calls the 'requestForm()' javascript function when clicked.

The rest of the HTML is very straightforward - basic tables and input fields. The key though to sending the XML to Domino is the <IFRAME> tag that is used:

Using its 'style' attributes, it is made invisible to the user. It has been give the id 'XMLPOST' and we will see how it is used in the next section - Javascript.

Javascript

The Javascript is stored 'raw' within the 'javascript.js' page element which is in the 'XMLReceive.nsf' database design.

It comprises of some setup code and the following three functions:

requestForm() - Used by submit button
postXML() - Generates XML and posts to Domino
postComplete() - Is called when xml successfully parsed and a Notes Document has been created

The 'setup code' comprises of the following:

var fields=new Array() - Creates a fields array which is used by code to determine the field names

fields[0]="first" - Field name setup
fields[1]="middle"
fields[2]="surname"
fields[3]="email"

var formname="Contact" - Where you specify Notes Form Name
var db="Contacts.nsf" - Where you specify location of Notes Database

var mode="new" - Ignore for now
var theid="" - Ignore for now

To start the process off, the user enters data into the fields (first,middle,surname,email) - and then clicks the 'submit' button. This is not the usual 'submit' button - as it does not automatically post a 'HTML form'. Instead it has an 'onclick' event which calls the 'requestForm()' function.

function requestForm(){
XMLPOST.location.href="postxml.htm?openform"
}

All this function does is load the 'GLOBAL_XML_POST' notes form which has the alias 'postxml.htm' into the <IFRAME> which has the id 'XMLPOST'. As this <IFRAME> is hidden, the user will never see it.

The actual 'GLOBAL_XML_POST' form comprises of 3 fields:

xml_mode - Not really used in this demo but tells the Java Agent whether to edit or create a new document
xml_data - This is where the XML, once created, is put ready for posting.
SaveOptions - Set to "0" so the form itself does not create a Notes Document

The form also has its 'WebQuerySave' set to @Command([ToolsRunMacro]; "GLOBAL_XML_RECEIVE").

The key part though, in terms of the Javascript, is that the form has an 'onload' event which calls the function postXML(). As the form is loaded within an <IFRAME> of the main HTML page, you need to prefix this with 'parent' so that it can call functions from that page.

The reason this is in the 'onload' event is so the browser waits before this form is loaded before continuing. Once called, this function then loops through the field name array "fields" and retrieves the data from the HTML page and constructs the XML - it then populates the 'xml_data' field with this XML and submits the form.

function postXML(){

var doc=XMLPOST.document - gets a handle to the Notes Form within the <IFRAME>

doc.getElementById("xml_mode").value=mode - Ignore for now but sets the mode to "new"

Start of XML generation

var xmldata=""
xmldata+="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>"

Creates a 'Document' with attributes of 'form' and 'db'

xmldata+="<document ID=\""+theid+"\" form=\""+formname+"\" db=\""+db+"\">"

Loops through 'fields' and creates XML line for them (ie: <first t="T" n="n">Steve</first>)

for (var i=0;i<fields.length;i++){
xmldata+="<"+fields[i]+" t=\"T"+"\" n=\"n\">"
xmldata+=document.getElementById(fields[i]).value
xmldata+="</"+fields[i]+">\n"
}

Closes document

xmldata+="</document>"

Puts the resulting XML into the 'xml_data' field

doc.getElementById("xml_data").value=xmldata

Domino Form is submitted

XMLPOST.document.forms[0].submit()
}

The resulting XML then looks like:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<first t="T" n="n">Steve</first>

<surname t="T" n="n">Castledine</surname>

<email t="T" n="n">steve.castledine@projectdx.org</email>

</document>

Don't worry about the 't' and 'n' attributes, I will cover them in another article - they basically send instructions to the receiving Java agent on field types.

Finally, after the Java Agent has processed the XML and created a Document, this agent then sends code back to the <IFRAME> that then calls the last function 'postComplete()' - it also passes the ID of the created document - should I wish to do anything further with it.

function postComplete(msg){
alert("Message From XML Agent: "+msg)
}

I just simply display an alert box with the ID>

Next - how the Java Agent works.

As usual please feel free to play around and to use whatever you want within your own applications.

Questions? - steve.castledine@projectdx.org