Best practices and patterns for customizing human task forms in IBM Business Process Manager V7.5

With IBM® Business Process Manager Advanced V7.5, you can manage and work on human tasks in widget that are provided out-of-the-box. These widgets are supported by Business Space powered by WebSphere® and WebSphere Portal. You can easily customize and extend the underlying HTML forms with rich Web 2.0 feature using patterns and best practices. By using these methods, you can save time and effort to build a custom user interface. This article presents a step-by-step example that models task templates and customizes and extends HTML forms. The article also highlights applied patterns and best practices that you can use. This content is part of the IBM Business Process Management Journal.

Ge Gao (gegao@de.ibm.com), IT Specialist, IBM

Photo of Ge GaoGe Gao works as an IT Specialist in the IBM Worldwide Technology Practice team at the IBM Germany Research and Development Lab in Boeblingen, Germany. He helps many global customers with their business process integration and management projects based on IBM lab-level practice. His consulting technical area covers from frontend tooling and Web UI to backend infrastructure and performance. Ge has a Master's degree in Computer Science from the University of Stuttgart and a Bachelor's degree from Shanghai Jiaotong University.



15 February 2012

Overview

In IBM Business Process Manager Advanced V7.5, each modeled human task can use an HTML-Dojo form in Business Space as a web user interface of the task. These forms are plain HTML files with some Dojo markups for the Task Information widget, thus they are easily customizable and extendable. In this article, you will see a step-by-step example on how to customize and extend the human task user interface by applying some best practices and patterns. Before working through the steps in this article, download and import the basic TWX files for the process applications, Hello Business Space Sample and Hello Business Space Sample Web, into your Process Center. You can also download the complete version of these two process application for comparison. For more information, see the Generating HTML-Dojo pages or IBM Forms for Business Space topic in the IBM Business Process Manager Information Center.

This article describes the following best practices with examples:

You will use the following features in this article:

  1. Use the replacement variables pattern for human task description.
  2. Use the working-continuously pattern in Business Space to increase efficiency.
  3. Use the assignment before and after human task pattern to increase performance.
  4. Use the declaratively include Dojo widget pattern and group fields into one section to group similar fields into one section and make the form concise.
  5. Use the declaratively include Dojo widget pattern and embed Dojo event handling to get type-ahead function.
  6. Use the mixing fields pattern to finely control the different visibilities for different task roles.
  7. Use the embed Dojo event handling pattern to initialize the type-ahead ComboBox widget or automatically fill out the task form content.

Note: The sample provided with this article was tested with IBM Integration Designer and IBM Business Process Manager Advanced V7.5.0.1.


Modeling human tasks in Integration Designer

You can model BPM human tasks in IBM Integration Designer (hereafter called Integration Designer).

Importing basic implementation and sample users into Process Center

To customize and extend the example provided in this article, import the basic implementation into the Process Center. You can import these TWX files in the Process Center perspective of Integration Designer. Figure 1 shows the sequence of how to import and open the basic implementation.

Figure 1. Import basic TWX implementation into Process Center
Import basic TWX implementation into Process Center

The imported basic implementation consists of two process applications:

  • Hello Business Space Sample (HelloSampleModel_Basic.twx): This application has three sample integration modules and one module providing a REST service consumed by the Dojo widgets
  • Hello Business Space Sample Web (HelloSampleWeb_Basic.twx): This application has all the generated HTML task forms, their themes, and the Dojo class used within the forms.

Next, create the sample users maxx and minn in your Process Center by running the addUsers.jacl script that is provided in the Download section of this article. The created users have the same password as their user name. Run the following command in your profile's bin directory (assuming you have a Microsoft® Windows® environment):

wsadmin.bat –user <ADMIN_USER> -password <ADMIN_PASSWORD> -f <PATH_TO_ADDUSERS.JACL>

Import a pre-configured space into your Business Space installation. Log into your Business Space as administrator and follow the steps shown in Figure 2 to import Hello Space. The HelloSpaceExport.zip file is provided in the Download section.

Figure 2. Import pre-configured Hello Space into Business Space
Inport pre-configured Hello Space into Business Space

Add the user maxx to the role Editor of the imported HelloSpace and the user mixx to the role Viewer, as shown in Figure 3. Click Manage Spaces, then to the right of HelloSpace, click Actions, and then Share.

Figure 3. Add users to Editor and Viewer roles of the imported space
Add users to roles Editor and Viewer of imported space

Defining meaningful task name, display name, and description

When you model the human tasks in Integration Designer, a best practice is to define meaningful names and descriptions for the artifacts. Table 1 shows the default names of different task types that can be worked on with human task management widgets in Business Space. In case the generated default name is not editable, you first define the name of the deriving source before generation.

Table 1. Name property of different human task artifacts
Artifact property Default name Is default name editable? HTML file name Task name in Business Space
Inline human task activity name HumanTask(N) Yes - -
Inline human task activity display name HumanTask(N) Yes - -
Inline human task name <BPEL process name>Task(N) No Derived from human task name -
Inline human task display name <Activity display name> Yes - Human task display name
Invocation human task activity name Receive(N) Yes - -
Invocation human task activity display name Receive(N) Yes - -
Invocation human task name <Activity name>InvocationTask No Derived from human task name -
Invocation human task display name <Activity display name> Yes - Human task display name
Standalone human task component name Component(N) Yes - -
Standalone human task component display name Component(N) Yes - -
Standalone human task name <Human task component name> Yes Derived from human task name -
Standalone human task display name <Human task component name> Yes - Human task display name

The name affecting the end user is the display name of a human task. This name is displayed in the widgets as the task name. For invocation and in-line human tasks, you can change the generated task display name if the "Use the display name, description, and documentation from the BPEL process activity" feature is disabled. The name that affects the Web developer is the human task name and the activity or component display name. The generated HTML file name for the task form is derived from a human task name. An understandable file name can help a developer find the HTML file from numerous task forms. A meaningful activity or component display name can make your implementation more readable.

Now you can rename the Receive activity name and display name of the process HelloWorldBP to StartHelloWorld and Start Hello World as shown in Figure 4. Likewise, rename the name and display names of the HumanTask activity in the HelloBPMBP process to SelectBPMProduct and Select BPM Product. In the Details tab of the human task activity, click New to generate the human task model. Specify SelectBpmProductTask as the task name. Do not forget to assign the input and output variables of that human task.

Figure 4. Defining name and user name of a Receive activity
Defining name and user name of a Receive activity

To make the task description more flexible, use the replacement variables pattern. Set the description for the Set Hello Replacement Task human task activity to: Replace Hello with your language. The current value is %wf:variable.hello\%. The Insert Variable button can help you find usable replacement variables. For more information, see the Replacement variables and context variables topic in the Information Center.

Splitting a complex human task and using the working-continuously pattern

A complex human task, such as one with 50 editable fields, will make the task editor's work hard, not only because of the large form size, but also because performance on the fronteend decreases. To avoid this issue, we recommend that you split a complex human task into a few smaller tasks. Divide the tasks according to the context of the fields. In addition, you can apply the "assignment before and after a human task" pattern shown in Figure 5 to reduce the number of fields that are displayed in the task form.

Figure 5. Using assignments to reduce business object size of a human task
Using assignments to reduce business object size of a human task

To work on the series of tasks efficiently, you can apply the "working-continously" pattern by enabling the Accept next available task option in the settings of the Task Information widget. The configuration is described in the Configuring how work is assigned topic of the Information Center. Figure 6 shows this configuration. The imported Hello Space has the Task Information widget already configured with this feature.

Figure 6. Enabling a working-continously pattern
Enabling a working-continously pattern

Using a shared web module to store human task forms

In Integration Designer, you can choose where to store the generated form of a human task. A best practice is to store these HTML forms to use a shared web module located in a separate process application. In the imported basic implementation, the Hello Business Space Sample Web process application contains one web module called HelloSampleWeb, in which the generated HTML task forms are stored.

In this way, the business logic and web presentation are separated. If you change the business logic without changing the human task interface, you do not need to touch the task forms at all. In the meantime, you can modify the task form presentation and deploy it quickly without touching the deployed integration modules. A web developer and an integration developer can then concentrate on their own areas. This saves deployment time because deploying a web module is much faster than deploying a business integration module.

Take a look at the structure of the Hello Business Space Sample Web process application, shown in Figure 7. Under the WebContent folder of HelloSampleWeb, there are three folders, each storing the generated HTML task forms of the integration module with the same name. With this structure, the integration developer can easily find the corresponding forms. You can now generate the HTML task form of the SelectBpmProductTask task to be stored under the HelloBPM folder in the HelloSampleWeb shared web module. Likewise, select the existing StartHelloWorldInvocationTask.html file in the HelloWorld folder for the Start Hello World human task of the HelloWorld module.

Figure 7. Project structure in Integration Designer
Project structure in Integration Designer

To deploy the shared Web module with the process application together, you need to add it to the dependencies of the default integration module of that process application. Expand the Hello_Business_Space_Sample_Web_Implementation module, double-click on its Dependencies to open the Dependency editor, and add the HelloSampleWeb module to the J2EE dependencies, as shown in Figure 8.

Figure 8. Adding a Web module to dependencies of the integration module
Adding a Web module to dependencies of the integration module

An empty integration module is not deployed to the Process Center, even if it has a dependency on the shared module. To work around this, you can just drop any artifact from the assembly diagram palette to its canvas (see Figure 9). For example, drop an untyped component with no implementation. For more information, see the Assembly Editor topic in the Information Center.

Figure 9. Building a dummy assembly diagram for deployment
Building a dummy assembly diagram for deployment

Customizing generated human task forms

In the earlier part of this article, the pattern and best practices for modeling human tasks in Integration Designer have been introduced. You have the generated HTML task forms stored in the shared Web module with meaningful file names. You can now start customizing and extending these task forms to make them more stylish and efficient for your users.

Using a common CSS file for consistent style

Each generated HTML form has its own styles included between the HTML head tag. The generated content is almost the same except the class name. The class name includes a unique identifier that indicates the time the HTML/Dojo was generated. As long as there is only one version of the task application, the unique identifier is not important. A best practice is to use a common CSS file for all task forms so that your task forms can always keep a consistent style and are easier to maintain. Listing 1 shows a code snippet of the generated style of an HTML form.

Listing 1. Generated style of an HTML form
<style type="text/css">
    /**
     * General
     */
    .HTM_ReceiveHelloWorldInvocationTask_2140960948_7_5_0_v20110519_0923 .fieldLabel {
        width: 150px;
        text-align: left;
        display: inline-block;
    }
    … …
    /**
     * CSS Style for background color of required fields
     */
    .HTM_ReceiveHelloWorldInvocationTask_2140960948_7_5_0_v20110519_0923 .fieldInput 
     .requiredBackgroundColor {
    /*
        background: none;
        background-color: #ffffd0;
    */
    } 			 
</style>

You can paste the generated style in the common CSS file and replace the style name with a common name, such as .HelloTheme. Then, you just need to include your common style sheet in your generated task forms. Listing 2 shows a common CSS file.

Listing 2. Common style sheet for all generated HTML forms
@CHARSET "UTF-8";
    /**
     * General
     */
    .HelloTheme .fieldLabel {
        width: 150px;
        text-align: left;
        display: inline-block;
    }
    /**
     * CSS Style for background color of required fields
     */
    .HelloTheme .fieldInput .requiredBackgroundColor {
    /*
        background: none;
        background-color: #ffffd0;
    */
    }

In the example, to include the style sheet, open the newly generated SelectBpmProductTask.html file. Remove the <styles> tag and all the content within the tag. The next step is to paste the following code between the <head> tag as shown in Listing 3.

Listing 3. Including a common CSS file in the generated HTML form
<link rel="stylesheet" href="../theme/HelloCommon.css" type="text/css" />

Finally, change the first level division of the HTML form from the generated class to the common theme as shown in Listing 4.

Listing 4. Changing the HTML form to use the common style
<body class="tundra">	
    <div class="HelloTheme">
        <form dojoType="dijit.form.Form" class="view" action="">

Grouping similar fields into one section

A concise task form can help business users easily work on the business logic. One useful feature is to group related business fields into one expandable section. This is done with the help of the Dojo widget, dijit.TitlePane, by applying the declaratively include Dojo widget pattern.

Open the InputBluepageInformation.html file of the HelloSampleWeb module to declare the use of this widget between the <head> tag as shown in Listing 5.

Listing 5. Declaring dijit.TitlePane dependency in HTML head
<script type="text/javascript">
	dojo.require("dijit.TitlePane");
</script>

Then, add the following line shown in Listing 6 below the <h3> tag:

Listing 6. Declaratively using the dijit.TitlePane widget
<div dojoType="dijit.TitlePane" title="Personal Information:" open="true">

You can now add a closing division tag </div> before the next line of dijit.TitlePane, which groups the fields for the Contact Information. The property opened here indicates that this section needs to be collapsed on the initial load. Figure 10 shows a grouping of related fields into one section.

Figure 10. Grouping related fields into one section
Grouping related fields into one section

Mixing fields for different task roles

By default, the body part of a generated task form is divided into two parts. All task input message fields are located in front of the task output message fields. In view mode for a task reader, both input and output message fields are visible and read-only. In edit mode for a task owner or administrator, both input and output message fields are visible by default, and input fields are read-only while output fields can be edited. In case the input and output types of a human task interface are equal and not of a simple type, the input part is then initially invisible. Figure 11 describes the default visibility rules in different modes.

Figure 11. Structure of generated HTML form in different display modes
Structure of generated HTML form in different display modes

Sometimes the business requirement for the visibility rules is not the same for all the fields, but needs to finely control each field. For example, the user with a role of "reader" can only see the input fields, while the user with a role of "editor" can only see and edit the output fields. These are shown in Figure 12 with Fields A and C. In the meantime, some fields are required to be visible in both view and edit modes, such as Field B in Figure 12. In this scenario, the default display mode cannot meet the requirement. However, you can easily implement it by applying the "mixing fields" pattern to finely control each field.

Figure 12. Structure of mixed input and output fields in task form
Structure of mixed input and output fields in task form

Listing 7 shows a Homepage field that displays a read-only hyperlink in view mode. When in edit mode, it displays with an editable input box and a read-only hyperlink below the input box with the address of the input. This is shown in Figure 13.

The first division uses mixedInputMessage as the style class, which means it is always invisible in this mixed case. The second division uses outputMessage as the style class, which means it is hidden in view mode and visible and editable in edit mode. The third division always displays the read-only hyperlink, but does not display the label in edit mode. The label's visibility is controlled by the mixedLabel and mixedEmptyLabel styles. To complete the sample, paste the code shown in Listing 7 to the InputBluepageInformation.html file and the code shown in Listing 8 into HelloCommon.css.

Listing 7. Mixed fields in customized HTML form
<div class="fieldContainer mixedMessageInput">
	<label class="fieldLabel" for="http___issw.ibm.com_sample_HelloIBM_interface
     _InputBluepageInfoTaskIFinputBluepageInfoTaskOpRequestMsg_input7
     _HTMUniqueWidgetID">
		Homepage
	</label>
	<div type="text" name="/bluepageInfoInput/homepage" value="" sdoPosition="7" 
     dojoType="dijit.form.ValidationTextBox" regExp=".*" id="http___issw.ibm.com_
      sample_HelloIBM_interface_
      InputBluepageInfoTaskIFinputBluepageInfoTaskOpRequestMsg_input7_HTMUniqueWidgetID"
		 sdoMessageType="input"  sdoPrepopulation="" required="false" class="">
			<script type="dojo/connect" event="onChange">
				console.debug("------- form onKeyUp event begin -------");
com.ibm.issw.widgets.SampleUtil.replaceHyperlink("http___issw.ibm.com_sample_
 HelloIBM_interface_InputBluepageInfoTaskIFinputBluepageInfoTaskOpRequestMsg_
   input7_HTMUniqueWidgetID", 
  "http___issw.ibm.com_sample_HelloIBM_interface_InputBluepageInfoTaskIFinputBluepage
   InfoTaskOpResponseMsg_hyperlink_HTMUniqueWidgetID");					
				console.debug("------- form onKeyUp event end -------");
			</script>		 
	</div>
</div>
<div class="fieldContainer outputMessage">
	<label class="fieldLabel" for="http___issw.ibm.com_sample_HelloIBM_interface_
     InputBluepageInfoTaskIFinputBluepageInfoTaskOpResponseMsg_output7_
     HTMUniqueWidgetID">
		Homepage
	</label>
	<div type="text" name="/bluepageInfoOutput/homepage" value="" sdoPosition="7" 
     dojoType="dijit.form.ValidationTextBox" regExp=".*" id="http___issw.ibm.com_sample_
     HelloIBM_interface_InputBluepageInfoTaskIFinputBluepageInfoTaskOpResponseMsg_output7_
      HTMUniqueWidgetID"
		 sdoMessageType="output"  sdoPrepopulation="/bluepageInfoInput/homepage" 
          required="false" class="">
			<script type="dojo/connect" event="onKeyUp">
				console.debug("------- form onKeyUp event begin -------");
com.ibm.issw.widgets.SampleUtil.replaceHyperlink("http___issw.ibm.com_sample_HelloIBM_
 interface_
 InputBluepageInfoTaskIFinputBluepageInfoTaskOpResponseMsg_output7_
  HTMUniqueWidgetID", 
 "http___issw.ibm.com_sample_HelloIBM_interface_InputBluepageInfoTaskIFinputBluepage
  InfoTaskOpResponseMsg_hyperlink_HTMUniqueWidgetID");					
				console.debug("------- form onKeyUp event end -------");
			</script>		 
	</div>
</div>
<div class="fieldContainer">
	<label class="fieldLabel mixedLabel" for="http___issw.ibm.com_sample_
     HelloIBM_interface_InputBluepageInfoTaskIFinputBluepageInfoTaskOpResponseMsg_
      hyperlink_HTMUniqueWidgetID">
		Homepage
	</label>
	<label class="fieldLabel mixedEmptyLabel" for="http___issw.ibm.com_sample_
     HelloIBM_interface_InputBluepageInfoTaskIFinputBluepageInfoTaskOpResponseMsg_
     hyperlink_HTMUniqueWidgetID">
	</label>
	<a id="http___issw.ibm.com_sample_HelloIBM_interface_InputBluepageInfoTaskIF
     inputBluepageInfoTaskOpResponseMsg_hyperlink_HTMUniqueWidgetID" href="" 
     target="_blank">
	</a>
</div>
Listing 8. Customized style for inputMessage and outputMessage
/**
 * CSS Styles for task input fields with value to replace HTML tag place holder.
 * Hidden in both edit and view mode.
 */
.HelloTheme .edit .mixedMessageInput {
	display:none;
}		
.HelloTheme .view .mixedMessageInput {
	display:none;
}

/**
 * CSS Styles for label of HTML tag place holder.
 * Hidden in edit mode and shown in view mode.
 */
.HelloTheme .edit .mixedLabel {
	display:none;
}		
.HelloTheme .view .mixedLabel {
}

/**
 * CSS Styles for empty label of HTML tag place holder.
 * Hidden in view mode and shown in edit mode.
 */
.HelloTheme .edit .mixedEmptyLabel {
}		
.HelloTheme .view .mixedEmptyLabel {
	display:none;
}

In our sample, the user maxx is the potential owner of the human task Input Bluepage Information, while the user minn is the task reader. maxx is also set to be the space editor of Hello Space, while minn is the space viewer.

Using the custom JavaScript and event handling in the task form

Event handling is a key function of the Web 2.0 technology. In this step, you will see the pattern to "embed Dojo events handling" in the generated HTML task forms. A few Dojo events are often used for this use pattern: startup, onChange, onKeyUp, and onBlur. The event startup is used to initialize the fields with a calculated value. You can find an example in Customizing HTML-Dojo Forms for human tasks in Business Space. The event onChange is triggered when an input field has been initialized, or an output field has been pre-populated. Therefore, you can replace some placeholders in the form with the fields' values. The onKeyUp event is used to connect an editable output field, thus when a user has modified some fields, some placeholders are immediately replaced by the new value. The onBlur event is used for some custom validation or some automatic correction when the field loses its focus. Table 2 summarizes the use pattern for these Dojo events.

Table 2. Sample use patterns for Dojo events
Dojo event Use pattern
startup Dynamically initializes the fields with a calculated value.
onChange Replaces a placeholder or initialized field with a pre-populated input value.
onKeyUp Replaces a placeholder with immediate changes.
onBlur Custom validation or auto-correction when the focus changes.

In our example, we will customize the form to display the homepage field as a link, the email address with a mailto function, and an embedded video field with a YouTube flash. The address for the fields' content is pre-populated from the input message. When the input field is being edited, the hyperlink is changed on-the-fly. Complete only the first function for the hyperlinks. The other functions have been already implemented. At first, you need to have your own Dojo class. A file called SampleUtil.js, which is under the WebContent/com/ibm/issw/widgets directory of the HelloSampleWeb project, has already been created. Paste the code snippet shown in Listing 9 at the beginning of SampleUtil.js.

Listing 9. Dojo class providing functions to replace HTML tags
dojo.provide("com.ibm.issw.widgets.SampleUtil");

/**
 * This function updates the hyperlink field with given identifier
 *  
 */
com.ibm.issw.widgets.SampleUtil.replaceHyperlink = function(idInput, idLink) {
	console.debug("------- replaceHyperlink begin -------");
	var inputNode = dojo.byId(idInput);
	var linkNode = dojo.byId(idLink);
	// Get the URL from task input fields
	var url = inputNode.value;
	// Replace href attribute and displayed URL of the hyperlink field
	linkNode.href = url;
	linkNode.innerHTML = url;
	console.debug("------- replaceHyperlink end -------");
};

To use this Dojo class, it must be registered and included between the <head> tag of the HTML task form as shown in Listing 10. Paste the code shown in Listing 10 into the InputBluepageInformation.html file between the <script> tag.

Listing 10. Register custom Dojo class in HTML form
<script type="text/javascript">
	dojo.registerModulePath("com.ibm.issw.widgets", "../com/ibm/issw/widgets");
	dojo.require("com.ibm.issw.widgets.SampleUtil");
</script>

The pattern to embed a Dojo class for event handling within HTML tags is to put an empty placeholder with the required HTML tag after the input and output fields. The embedded JavaScript registers to the Dojo event and connects that event to the custom Dojo class function. The triggered function then replaces the HTML tag placeholder with a value from the input or output fields. The Homepage field shown in Figure 13 has applied this pattern.

Figure 13. Task form with fields rendered by HTML tags
Task form with fields rendered by HTML tags

Typing ahead selection

The generated task form supports the type ahead selection for the enumeration types. However, you can apply this feature to the normal input field by using a more user friendly combo-box provided by the Dojo toolkit, such as dijit.form.ComboBox. Figure 14 shows a typing ahead selection by using dijit.form.ComboBox.

Figure 14. Typing ahead selection pattern
Typing ahead selection pattern

The ComboBox widget requires the store attribute to feed its options. Dojo provides a few ways to feed the data stores, such as dojo.data.ItemFileWriteStore, dojox.data.FileStore, dojox.data.JsonRestStore, and so on for different use cases. In the sample code of this article, dojo.data.ItemFileWriteStore is used to assign a group of options to the combo box. The Dojo event startup is used in this pattern to connect to the initialization function. Listing 11 shows the sample code that will initialize the combobox options.

Listing 11. Function to initialize dijit.form.ComboBox
/**
 * This function initialize options of the combobox with given identifier
 */
com.ibm.issw.widgets.SampleUtil.initComboBoxOptions =function(idComboBox) {
	console.debug("------- initComboBoxOptions begin -------");
	var comboBox = dijit.byId(idComboBox);
	var writeStoreJson = {
	identifier:	"name",
			items:	[{"name":	"IBM Business Process Manager"},
			      	 {"name":	"IBM Integration Designer"},
			      	 {"name":	"IBM Process Designer"},
                   		 {"name":	"IBM Business Monitor"}
			      	 ]
			};
	var writeStore = new dojo.data.ItemFileWriteStore({
						data:	writeStoreJson
					});
	comboBox.store = writeStore;
	console.debug("------- initComboBoxOptions end -------");
};

To complete this example, paste the code shown in Listing 11 into SampleUtil.js. Then, just as you did for dijit.TitlePane, you need to declaratively use the ComboBox widget. Just replace the <input> tag of the Name output message field in SelectBPMProductTask.html with the code shown in Listing 12.

Listing 12. Declaratively use dijit.form.ComboBox
<div type="text" name="/bpmProductOutput/name" value="--------- Please Select ---------" 
 sdoPosition="0" dojoType="dijit.form.ComboBox" regExp=".*" id="http___issw.ibm.com_
 sample_HelloBPM_interface_HelloBpmIFhelloBpmOpResponseMsg_output0_HTMUniqueWidgetID" 
  sdoMessageType="output"  sdoPrepopulation="/bpmProductInput/name" required="false" 
  class="" style="width: 300px">
	<script type="dojo/connect" event="startup">
	console.debug("------- combobox startup event begin -------");
		com.ibm.issw.widgets.SampleUtil.initComboBoxOptions("http___issw.ibm.com_
        sample_HelloBPM_interface_HelloBpmIFhelloBpmOpResponseMsg_output0_
        HTMUniqueWidgetID");
	console.debug("------- combobox startup event end -------");
	</script>
	<script type="dojo/connect" event="onChange">
	console.debug("------- combobox onchange event begin -------");	
     com.ibm.issw.widgets.SampleUtil.updateProductInfo(this.value,
		"http___issw.ibm.com_sample_HelloBPM_interface_HelloBpmIFhelloBpmOp
          ResponseMsg_output1_HTMUniqueWidgetID",
		"http___issw.ibm.com_sample_HelloBPM_interface_HelloBpmIFhelloBpmOp
          ResponseMsg_output2_HTMUniqueWidgetID",
		"http___issw.ibm.com_sample_HelloBPM_interface_HelloBpmIFhelloBpmOp
          ResponseMsg_output3_HTMUniqueWidgetID" );
	console.debug("------- combobox onchange event end -------");
	</script>		 
</div>

The onChange event connected to ComboBox is used for the auto-filling pattern, which is introduced in the next section.

Auto-filling in the task form

The auto-filling feature is often required in Web 2.0 forms because it is user friendly and time saving. In the example, this feature is used by embedding some Dojo code, which is triggered by the onChange event of the combo-box widget when the field has been filled up. In the example, the Dojo function calls the specified REST service backend with the selected IBM Business Process Manager product name in the request information. In the callback function of the REST service invocation, the other fields are updated with a returned value.

In the sample code shown in Listing 13, dojo.xhrPost sends an HTTP-Post request to the backend REST service. The returned response is then processed in the callback function, which is defined by the load parameter of the XHR request. For more information about the supported XMLHttpRequest object properties by Dojo, see dojo.xhrGet supported object properties. To complete this example, paste the code shown in Listing 13 into SampleUtil.js.

Listing 13. Custom Dojo function for auto-filling
/**
 * This function updates the fields with given identifiers for auto-filling
 */
com.ibm.issw.widgets.SampleUtil.updateProductInfo = function(productName, versionId, 
  fixpackId, emailId) {
	console.debug("------- updateProductInfo begin -------");
	var versionText = dijit.byId(versionId);
	var fixpackText = dijit.byId(fixpackId);
	var emailText = dijit.byId(emailId);
	var url = "../HELOBSP-Tip-HelloSampleRestWeb/BpmHelloQueryExport/";
	/*---------------------------------------------------*/
	var method = "getProductInfo";
	var requestData = {"productName":	productName};
	var request = {
	url:			url+method,
	handleAs:		"json",
	contentType:		"application/json",
	headers : 		{ Accept : "application/json,application/javascript" },
	postData:		dojo.toJson(requestData),
	preventCache:		"true",
	load:			function(response) {
			versionText.value = response.productInfo.version;
			fixpackText.value = response.productInfo.recommendedFixPack;
			emailText.value = response.productInfo.contactEmail;
			var valueString = "value=\""+response.productInfo.version+"\" ";
			versionText.domNode.innerHTML = versionText.domNode.innerHTML.
             replace(/value\ *=\ *\"[^\"]*\"\ /, valueString);
			valueString = 	"value=\""+response.productInfo.recommendedFixPack
             +"\" ";
			fixpackText.domNode.innerHTML = fixpackText.domNode.innerHTML.
             replace (/value\ *=\ *\"[^\"]*\"\ /, valueString);
			valueString = "value=\""+response.productInfo.contactEmail+"\" ";
			emailText.domNode.innerHTML = emailText.domNode.innerHTML.replace
             (/value\ *=\ *\"[^\"]*\"\ /, valueString);
						}
	};
	dojo.xhrPost(request);
	console.debug("------- updateProductInfo end -------");
};

Conclusion

In this article, you have modeled human tasks in IBM Integration Designer with meaningful names, and applied replacement variable patterns to the task descriptions. You have learned how to simplify a complex human task user interface by splitting it into a few smaller tasks and applying the working-continuously pattern to increase the user's efficiency. The article also introduced a best practice to use a shared web module to store the task forms.

In the latter part of this article, you learned how to use a common CSS file to make the tasks' style consistent, and how to make the task form concise by grouping similar fields and mixing the fields for a different role's visibility requirement. You also extended the HTML-Dojo form to include type-ahead and auto-filling features with the help of the Dojo event use pattern. Using these methods and best practices, you can apply different combinations of these use patterns to create a more stylish and efficient web user interface for your IBM Business Process Manager project.


Acknowledgments

The author would like to thank Michael Friess, Andreas Schuetz, and Andreas Schoen for their review of this article.


Download files

This sections lists all the files available in the download.zip file that is provided with this article.

Description File name
Basic implementation model HelloSampleModel_Basic.twx
Basic implementation Web HelloSampleWeb_Basic.twx
Full implementation model HelloSampleModel_Full.twx
Full implementation Web HelloSampleWeb_Full.twx
Add test users addUsers.jacl
Preconfigured space HelloSpaceExport.zip

Download

DescriptionNameSize
Sample project filesdownload.zip2.7MB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=793356
ArticleTitle=Best practices and patterns for customizing human task forms in IBM Business Process Manager V7.5
publish-date=02152012