Claim Processing Demo - Client Design Guide

Introduction

This document will explain how the Claim Request client web page of the Claims Processing Sample Application  was designed and implemented using process request forms generated from the ClaimsProcessing schema using ActiveVOS Designer. Here is an image showing the page that will be described:

The actual web application consists of additional pages and resources which are described in the Project Contents section below. 

Development Steps Outline

Here is an outline of the steps that were used to build the claim processing request (claimRequest.html) page:

• Generate the Process Request Forms using the schema interface for the Claims Processing BPEL Process
• Make the following modifications to the generated forms and will be described in greater detail below:
• Replace the generic html to
• Replace $ID with _ID in the generated form
• Import ActiveVOS Central resources
• Update the form to handle attachments

Project Contents

The complete project for this client is located in the AVClaimClient folder and contains the following files:

Development

Generate the Process Request Forms

The process request forms were generated in ActiveVOS Designer using the schema definition for the claim process WSDL interface.  Copies of the original forms are located in the OriginalRequestForms folder of this project.  For a quick look at the changes you can compare the files in this folder against the modified versions of the same files which are located in the WebContent folder.

Modify the generated forms

1.  Replace $ID with _ID in the generated form

The $ID suffix is used in HTML element names, attributes or in JavaScript are replaced with a unique string (an integer for Request forms, and taskID for Task forms) when the form is rendered by ActiveVOS Central.  Since we don't need this feature in our externalized version of the process request form, and the $ string is not a valid character for an <id> attribute we will change the $ to and underscore character.

2.  Import ActiveVOS Central resources

<script type="text/javascript">
 // Path to where images, script files, css etc. are stored.
 AE_RESOURCE_BASE = "";
 // animated 'loading' image
 AE_AJAX_IMAGE_SRC = "images/ajax-loader.gif";
 // transparent 1px X 1px image.
 AE_1X1_IMAGE_SRC = "images/trans1x1.gif";
 // Current locale, country and lanuage
 AE_ACTIVEVOS_I18N_LOCALE = "en_US";
 AE_ACTIVEVOS_I18N_LANGUAGE = "en"; 
 AE_ACTIVEVOS_I18N_COUNTRY = "US"; 
 </script> 
 
 <!-- Stylesheet references from jquery and for avc -->
 <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
 <link type="text/css" href="css/dataTables/jquery.dataTables.css" rel="stylesheet" />
 <link type="text/css" href="css/timeentry/jquery.timeentry.css" rel="stylesheet" />
 <link type="text/css" href="css/ae-avc-app-icons-sprite.css" rel="stylesheet" /> 
 <link type="text/css" href="css/ae-avc-task-ops-sprite.css" rel="stylesheet" /> 
 <link type="text/css" href="css/ae-avc-file-types-sprite.css" rel="stylesheet" /> 
 <link type="text/css" href="css/ae-avc.css" rel="stylesheet" />

 <!-- Stylesheet for this app with overrides to the jquery and avc standard 
 stylesheets -->
 <link href="master.css" rel="stylesheet" type="text/css">
 
 <!-- Scripts for jquery and plugins -->
 <script type="text/javascript" src="js/json2.js"></script> 
 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/jquery.validate.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
 <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="js/KeyTable.min.js"></script>
 <script type="text/javascript" src="js/jquery.i18n.properties-1.0.4-min.js"></script>
 <script type="text/javascript" src="js/date.js"></script> 
 <script type="text/javascript" src="js/jquery.viewport.js"></script>
 <script type="text/javascript" src="js/jquery.delay.js"></script>
 <script type="text/javascript" src="js/jquery.form.js"></script>
 <script type="text/javascript" src="js/jquery.timeentry.js"></script>
 <script type="text/javascript" src="js/additional-methods.js"></script>
 
 <!-- Common AVC scripts -->
 <script type="text/javascript" src="js/ae-avc-util.js"></script>
 <script type="text/javascript" src="js/ae-avc-ui.js"></script>
 <script type="text/javascript" src="js/ae-avc-requests.js"></script>
 <script type="text/javascript" src="js/ae-avc-tasks.js"></script>
 
 <script type="text/javascript">
 // define engine url
 AE_ACTIVEVOS_ENGINE_URL = "http://localhost:8080/active-bpel";
 </script> 

3.  Update the form to handle attachments

Note: Applicable to ActiveVOS 7.1.2 or later.

In order to support attachments in process request forms the following changes must be made to the form.

a. Find the input tag and change it to specify POST as the method and multipart/form-data as the enctype.

<input type="hidden" name="_json" value="" class="_json_ID" />
<input type="hidden" name="responseContentType" value="text/html" />
<input type="hidden" name="responseWrap" value="textarea" />

<input type="submit" id="sendRequest_ID" value="Send Request" class="avc_form_instance_save" /> 

// Assign handler for saving form data entered by the user
$("#sendRequest_ID").click(_submitRequest);

$('#requestInputForm_ID').submit(function() {
   requestForm.submitRequest();
   // Important always return false to prevent standard browser submit and page navigation
   return false;
});

AE_AJAX_SERVICE_UTIL.postJSON(url, request, _showResponseCallback, _showFaultCallback, _communicationErrorCallback);

var _error = function(xhr, status, errorThrown) {
    _showFaultCallback(errorThrown);
};

var jsonString = JSON.stringify(request);
$("._json_ID").val(jsonString);

var options = {
    dataType : 'json',
    url: url,
    success: _showResponseCallback,
    error: _error
};
$("#requestInputForm_ID").ajaxSubmit(options);

Copyright © 2010 Active Endpoints, Inc.