The generated HTML forms for tasks and forms fulfill a basic requirement of rendering XML message data into HTML. In addition, the form allows for powerful customization by taking advantage of several HTML-based technologies that Process Developer uses to create the form, namely:
JavaScript and Asynchronous JavaScript and XML (AJAX)
JavaScript Object Notation (JSON)
JQuery and JQuery UI
These technologies in combination provide dynamic forms and tasks. Note the following development features for a form:
Uses a standards-based solution
Allows you to work in any HTML editor
Provides many rendering possibilities for task and form message data, such as date pickers, tabs, check boxes and combo boxes
Allows rich additions, including calls to additional services, images, and most anything you can script for a Web application project
Provides access to large amount of technical resources, knowledge bases and web application developers
Below are some details on each of the technologies used to create tasks and forms.
JavaScript is the binding for the form and includes the subset of JSON and JQuery. AJAX calls services asynchronously in the background without interfering with the display and behavior of forms and tasks.
JavaScript Object Notation (JSON) is a data interchange format. XML messages from the form or task are converted to a JSON object. Process Developer's implementation of JSON is within the Google Data Protocol. For more information on JSON, see
http://code.google.com/apis/gdata/json.html
.
The Google Data Protocol has the following rules:
XML is represented as a JSON object.
XML version and encoding attributes are converted to version and encoding attributes of the root element, respectively.
If an element has a namespace alias, the alias and element are concatenated using "$". For example, ns:element becomes
ns$element
.
Each nested element or attribute is represented as a name/value property of the object.
Attributes are converted to string properties.
Child elements are converted to object properties.
Elements that can appear more than once are converted to array properties.
Text values of tags are converted to
$t
properties.
The following is an example of a XML to JSON conversion:
<?xml version="1.0" encoding="UTF-8"?>
<types1:EstimationRequest
xmlns:ns="http://example.org/QuoteRequest.xsd"
xmlns:ns1="http://example.org/QuoteRules.xsd"
xmlns:types1="http://example.org/Estimation.xsd">
<ns:refNumber>1</ns:refNumber>
<ns:quoteRequest>
<ns:contact>
<ns:name>JZ</ns:name>
<ns:email>activevos@gmail.com</ns:email>
</ns:contact>
<ns:model>500</ns:model>
<ns:year>1983</ns:year>
<ns:description>a fine car</ns:description>
</ns:quoteRequest>
</types1:EstimationRequest>
{"EstimationRequest":{"xmlns":"http:\/\/example.org\
/Estimation.xsd",
"refNumber":{"xmlns":"http:\/\/example.org\
/QuoteRequest.xsd","$t":"1"},
"quoteRequest":{"xmlns":"http:\/\/example.org\
/QuoteRequest.xsd",
"contact":{"name":{"$t":"JZ"},
"email":{"$t":"activevos@gmail.com"}},
"model":{"$t":"500"},
"year":{"$t":"1983"},
"description":{"$t":"a fine car"}}}}
Tip:
In order for forms to work with Process Central (JSON + JavaScript), the form element names must observe the same rules used to define JavaScript variables. For example, the variables can only contain contains letters, numbers, or underscores. Also element names should not be a reserved JavaScript keyword.
jQuery is a JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions. jQuery is built to select certain elements on a page and manipulate them. jQuery UI provides visual controls, including core interaction plug-ins as well as many UI widgets.
For details, see
http://jquery.com/
The selection process in jQuery is a filter process, whereby every element on a page is put through the filter you supply in a command, and the command returns either the single matching object or an array of matching objects from which you can traverse.
For example, to get an array of all the matching HTML elements in a page, you pass the HTML tag into the jQuery search field:
// Create a red background for every <p> tag in the page.
$("p").css("background", "#ff0000");
In a form, Process Server uses jQuery to select data elements. In the following example, a jQuery command creates a table for repeating elements. If a user wants to add a new row, the following code is used:
// Handles the adding of a new repeating field
$("#processRequestForm$ID").find("table.avc_repeating_field_data_table input[type='button'].avc_add_field_element").click(function() {
var table = $(this).parents("table:first");
var rows = $(table).find("tbody tr").length;
var lastRow = $(table).find("tbody tr:last");
var newRow = $(lastRow).clone(true);
$(lastRow).after(newRow);
HTML element ID attributes must end with
$ID
suffix, such as in the example above (
#processRequestForm$ID)
. The
$ID
suffix provides a unique HTML element ID to avoid collisions with other forms.
