Table of Contents

Search

  1. Preface
  2. Welcome to Informatica Process Developer
  3. Using Guide Developer for the First Time
  4. Getting Started with Informatica Process Developer
  5. About Interfaces Service References and Local WSDL
  6. Planning Your BPEL Process
  7. Participants
  8. Implementing a BPMN Task or Event in BPEL
  9. Implementing a BPMN Gateway or Control Flow
  10. Using Variables
  11. Attachments
  12. Using Links
  13. Data Manipulation
  14. Compensation
  15. Correlation
  16. What is Correlation
  17. What is a Correlation Set
  18. Creating Message Properties and Property Aliases
  19. Adding a Correlation Set
  20. Deleting a Correlation Set
  21. Adding Correlations to an Activity
  22. Rules for Declaring and Using Correlation Sets
  23. Correlation Sets and Engine-Managed Correlation
  24. Event Handling
  25. Fault Handling
  26. Simulating and Debugging
  27. Deploying Your Processes
  28. BPEL Unit Testing
  29. Creating POJO and XQuery Custom Functions
  30. Custom Service Interactions
  31. Process Exception Management
  32. Creating Reports for Process Server and Central
  33. Business Event Processing
  34. Process Central Forms and Configuration
  35. Building a Process with a System Service
  36. Human Tasks
  37. BPEL Faults and Reports

2. Designer

2. Designer

Customizing Task and Form Scripts An Introduction

Customizing Task and Form Scripts An Introduction

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 and AJAX
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.
JSON
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 Message
:
<?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>
JSON Object
:
{"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 and JQuery UI
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/
JQuery Example
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.
See also:


Updated March 30, 2020