Using Dojo to extend business processes to the mobile space

Dojo and WebSphere Application Server Feature Pack for Web 2.0 and Mobile provide function and flexibility

This article illustrates an example of how to build a simple mobile user interface that interacts with a business process. The implementation of the mobile UI uses Dojo with the IBM® WebSphere® Application Server Feature Pack for Web 2.0 and Mobile, and the sample business process is implemented with IBM Business Process Manager V7.5. The mobile web application built here renders with a native look and feel on webkit-enabled mobile devices such as iPhone, iPad, Android, and RIM smartphones and tablets. This content is part of the IBM WebSphere Developer Technical Journal.

Share:

Etienne Noiret (etienne.noiret@fr.ibm.com), WebSphere Solution Architect, IBM

Etienne Noiret has been working for more than six years in the BPM space using different technologies. He also worked for six years as a Java EE architect. After having developed some native mobile interfaces in Java and Flex, he discovered how easy it becomes using Dojo!



14 March 2012

Also available in Chinese

Introduction

Business processes define how work gets done within the enterprise through people and IT systems. While some processes remain informal, more and more organizations are trying to automate their business processes to enhance user productivity and improve overall business operations. Automated processes often involve user interactions in the form of tasks, and with the rapid growth of smartphones and tablets, workers can spend more time away from their desks while remaining productive. It then becomes necessary to provide suitable user interfaces for these devices.

This article presents an example of how you can build mobile user interfaces that enable workers or customers to interact with a sample business process, beginning with an outline of the prototype’s architecture, followed by an overview of the components and their implementation, including the sample process, mobile forms for invocation, and dynamic interaction with the process. The implementation of this sample mobile UI uses Dojo through the IBM WebSphere Application Server Feature Pack Feature Pack for Web 2.0 and Mobile. The sample business process is implemented in IBM Business Process Manager V7.5, the mobile UI being connected to the process engine through its web service or REST APIs. Sample code is included so you can test the sample in your environment.


Overview of the sample scenario

Figure 1 shows the components involved in this example:

  • IBM Process Designer is the development environment used in IBM Business Process Manager to model the Business Process Modeling Notation (BPMN) process and its artifacts, such as the business rules.
  • IBM Process Server is the runtime server that handles the execution of the processes. It also has a REST interface so that external applications can interact with the engine.
  • IBM Rational® Application Designer is the development environment used to create the user interface (HTML page and its Dojo components) and package it as a web application.
  • IBM WebSphere Application Server is the run time component that handles the execution of the web applications. As part of the Web 2.0 and Mobile feature pack, an Ajax proxy can be deployed in order to proxy the requests between the application and the remote services (for security reasons, client browsers prevent cross-site scripting by default).
Figure 1. Architecture of the sample
Figure 1. Architecture of the sample

Because IBM Process Server is built on top of WebSphere Application Server, it is possible to deploy the web application directly inside IBM Process Server. In such a case, the Ajax proxy isn’t required because the web application and the process services are collocated on the same instance.

The business process used in this example illustrates a simplified contract subscription in the Insurance domain. The business process is implemented using IBM Process Designer. Figure 2 shows the BPMN rendering of the process.

Figure 2. Sample process diagram
Figure 2. Sample process diagram

Let’s look at the implementation of the process steps outlined in the BPMN diagram (Figure 2). IBM Process Designer enables you to do this by configuring agents, services, or forms in an essentially code-free approach.

Step 1: Record case

This is the starting point of the process. It is modeled as a receipt of an external event, transporting the input data. In order to catch such an event, Business Process Manager uses a so-called undercover agent (UCA), as shown in Figure 3.

Figure 3. Undercover agent used to launch the process
Figure 3. Undercover agent used to launch the process

The undercover agent is attached to a service in response to the message received (the service could, for example, transform the data received into the right format expected by the process). In order to expose the process as a web service, which will be your integration point to launch it from the mobile device, two additional steps are required:

  1. Create a simple service that launches the UCA.
  2. Create a web service that invokes the latter as an operation.

Figure 4 shows the final web service.

Figure 4. Sample web service to launch the process
Figure 4. Sample web service to launch the process

The WSDL URL displayed in the figure can be selected in order to review the expected input parameters.

Step 2: Check case

This step is modeled as a rule using the Business Process Manager built-in rules engine. In this example, the purpose of this rule is to determine whether the subscription can be accepted as-is, or if it requires additional medical expertise, based on the contract amount and type. Figure 5 shows the input parameters used from the process context in order to configure this rule.

Figure 5. Business rule
Figure 5. Business rule

Step 3: Medical expertise

In cases where the previous rule led to the need for medical expertise, a task is assigned to an actor possessing the Medical expert profile (corresponding to the BPMN swim lane labeled “Medical expert” in Figure 2). Business Process Manager provides multiple ways to build user interfaces for handling task inboxes and task details pages. Using the built-in facilities of IBM Process Designer, the simplest way is to build a series of UI forms known as coaches, and to model the page flows between each of them, as shown in Figures 6 and 7.

Figure 6. Page flow between native coaches
Figure 6. Page flow between native coaches
Figure 7. Built-in editor to create coaches
Figure 7. Built-in editor to create coaches

Such user interfaces are then automatically deployed as web applications inside IBM Process Server and the default task list from IBM Process Portal is used as an entry point.

If you want to use your existing infrastructure to build and integrate your user interfaces, the Business Process Manager REST API is ideally suited to manage the interactions between the user interface and the process itself. Three main operations are usually required:

  1. Retrieve the task list for the current user.
  2. Retrieve the details for the specific task selected by the current user.
  3. Update the task content and status once a user has finished working on a task.

To help you leverage the REST API, Business Process Manager provides a web application tester that enables you to easily determine which parameters are expected (Figure 8).

Figure 8. Using the REST API tester
Figure 8. Using the REST API tester

The example presented here will make use of the REST API to dynamically build the task list and the task details pages.

Next, let’s look at how to invoke the business process from a mobile device.


Building a Dojo form to invoke the business process

An easy way to create portable mobile user interfaces is to use open standards such as HTML5, CSS3, and an associated JavaScript™ framework, such as Dojo. Dojo provides a rich set of widgets optimized for mobile devices with a native look and feel, which enable you to create powerful mobile user interfaces. IBM provides support for Dojo through the WebSphere Application Server Feature Pack for Web 2.0 and Mobile (available at no cost to WebSphere Application Server users). Several integrated development environments now include a WYSIWYG editor that supports Dojo, including Maqetta and IBM Rational Application Developer.

Figure 9. Creating a Dojo mobile user interface using Rational Application Developer
Figure 9. Creating a Dojo mobile user interface using Rational Application Developer

From the user’s point of view, the sample application consists of four simple pages:

  • Main page: An edge to edge list that contains a link to the Create subscription page and another to the My tasks page.
  • Create subscription page: A form used to enter the subscription details and launch the process through the exposed web service.
  • My tasks page: Displays the running tasks for the current user.
  • Task details page: Each line in My tasks list leads here, showing the subscription details and enabling the current user to accept or reject the case.

The last two pages use the Business Process Manager REST API, as you will see later.

In a traditional web application, these pages would typically have been made through four different dynamic web pages (such as JSP pages), each time carrying both the presentation and the data between the server and the browser. In a Rich Internet Application, the programming model is different: the presentation layer is loaded once and the user navigates between states, whilst data is loaded on the fly using Ajax asynchronous calls. In this example, there is only one HTML file that defines the views and their interactions using Dojo widgets.

Listing 1 shows how to create a simple view enabling you to navigate in the application using smooth slide transitions. On an Android device, the previous code would render as shown in Figure 10.

Listing 1. HTML code for the main view
<div data-dojo-type="dojox.mobile.View"
     id="MainView"
     data-dojo-props="selected:true">
   <h1 data-dojo-type="dojox.mobile.Heading"
       data-dojo-props="label:'Contracts subscription'">
   </h1>
   <div data-dojo-type="dojox.mobile.RoundRectList">
      <div data-dojo-type="dojox.mobile.ListItem"
           data-dojo-props="label:'Create subscription',moveTo:'CreateView',
		transition:'slide'">
      </div>
      <div data-dojo-type="dojox.mobile.ListItem"
           data-dojo-props="label:'My tasks',moveTo:'TaskListView',transition:'slide'"
           onClick="getTaskList()">
      </div>
   </div>
</div>
Figure 10. Main page as displayed by an Android device
Figure 10. Main page as displayed by an Android device

To invoke the business process, a form view is created using the same technique: standard HTML5 tags and data-dojo-xxx attributes, as shown in Listing 2. At run time, the Dojo parser recognizes these attributes and generates the additional DOM, CSS, and JavaScript elements, depending on the target browser.

Listing 2. The form used to submit the contract data
<!-- Create contract view -->
<div data-dojo-type="dojox.mobile.ScrollableView"
     id="CreateView"
    data-dojo-props="selected:false">
   <h1 data-dojo-type="dojox.mobile.Heading"
       data-dojo-props="label:'Subscribe contract',back:'Home',moveTo:'MainView',
	 fixed:'top'">
   </h1>
   <h2 data-dojo-type="dojox.mobile.RoundRectCategory"
       data-dojo-props="label:'Applicant'">
   </h2>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
      <li data-dojo-type="dojox.mobile.ListItem">
         <label class="itemText" for="ctnameField">Last name:</label>
         <input class="itemInput" id="ctnameField" type="text" value="Doe"/>
      </li>
      <li data-dojo-type="dojox.mobile.ListItem">
         <label class="itemText" for="ctfirstnameField">First name:</label>
         <input class="itemInput" id="ctfirstnameField" type="text" value="John"/>
      </li>
      <li data-dojo-type="dojox.mobile.ListItem">
         <label class="itemText" for="ctaddressField">Address:</label>
         <input class="itemInput" id="ctaddressField" type="text"
       value="avenue des champs Elysees, 75000 Paris"/>
      </li>
   </ul>
   <h2 data-dojo-type="dojox.mobile.RoundRectCategory" 
		data-dojo-props="label:'Contract'">
   </h2>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
      <li data-dojo-type="dojox.mobile.ListItem">
         <label class="itemText" for="cttypeField">Contract type:</label>
         <select id="cttypeField">
               <option value="Life insurance" selected>Life insurance</option>
               <option value="Retirement savings" >Retirement savings</option>
         </select>
      </li>
      <li data-dojo-type="dojox.mobile.ListItem">
         <label class="itemText" for="ctamountField">Amount:</label>
         <input class="itemInput" id="ctamountField" type="number" />
      </li>
   </ul>
   <h2 data-dojo-type="dojox.mobile.RoundRectCategory">
      <div align="center">
     <button data-dojo-type="dojox.mobile.Button"
             class="mblButton greyBtn baseBtn normalBtn"
             onclick="subscribe()">Subscribe</button>
     </div>
   </h2>
   <div id="responseStatus" class="itemText"></div>
</div>
Figure 11. The form rendered on an Android device
Figure 11. The form rendered on an Android device

At the end of Listing 2, notice the call to the subscribe() method on the onclick event of the button. This method needs to be written in a JavaScript block in order to manage the call to the web service. In addition to providing a rich set of widgets, Dojo also includes a complete library to handle asynchronous calls. A simple way to make the web service call is to manually create the SOAP envelope, dynamically append the data contained in the form, and use dojo.xhrPost() to make the asynchronous call and manage the response, as shown in Listing 3.

Listing 3. A Dojo Javascript method to make a web service call
<script type="text/javascript">
function subscribe() {
    var soapMsg = '<soapenv:Envelope 
		xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"'
    + ' xmlns:sub="http://SCA/SubscriptionWS.tws" 
		xmlns:sch="http://IBMDemos:9080/schema/">'
    + '<soapenv:Header/>'
    + '<soapenv:Body>'
    + '<sub:submitSubscription>'
    + '<sub:subscription>'
    + '    <sch:applicant>'
    + '       <sch:lastName>' + dojo.byId("ctnameField").value + '</sch:lastName>'
    + '    <sch:firstName>' + dojo.byId("ctfirstnameField").value + '</sch:firstName>'
    + '       <sch:birthDate>2011-12-05T00:00:00</sch:birthDate>'
    + '       <sch:address>' + dojo.byId("ctaddressField").value + '</sch:address>'
    + '    </sch:applicant>'
    + '    <sch:contract>'
    + '       <sch:subscriptionDate>2011-12-05T00:00:00</sch:subscriptionDate>'
    + '       <sch:contractType>' + dojo.byId("cttypeField").value + 
			'</sch:contractType>'
    + '       <sch:amount>' + dojo.byId("ctamountField").value + '</sch:amount>'
    + '    </sch:contract>'
    + '</sub:subscription>'
    + '</sub:submitSubscription>'
    + '</soapenv:Body>'
    + '</soapenv:Envelope>';

    var xhrArgs = {
        url: getServerBase() + "/teamworks/webservices/SCA/SubscriptionWS.tws",
        postData: soapMsg,
        handleAs: "text",
        headers: {
            "Content-Type": "text/xml;charset=UTF-8",
            "SOAPAction": http://SCA/SubscriptionWS.tws/submitSubscription
        },
        load: function(data) {
            dojo.byId("responseStatus").innerHTML = "Message posted.";
        },
        error: function(error, ioargs) {
            dojo.byId("responseStatus").innerHTML = "Bad reply,status:" + 
			ioargs.xhr.status + ": reason:" + ioargs.xhr.statusText;
        }
    }
    dojo.byId("responseStatus").innerHTML = "Message being sent..."
    var deferred = dojo.xhrPost(xhrArgs);
}
</script>

In the above example, if the web service returns a correct response, a status message is dynamically displayed at the end of the form, using the <div id="responseStatus".../> tag.


Building a dynamic task list using Dojo

At this stage, the user interface is built dynamically, depending on the number of pending tasks for the current user. Listing 4 shows the simple HTML code that will be dynamically modified to insert the task items. Notice in Listing 1 that the getTaskList() method is called when the main view transitions to the task list view, so that the list is filled automatically the first time.

Listing 4. HTML code for the task list
<div data-dojo-type="dojox.mobile.View" id="TaskListView"
    data-dojo-props="selected:false">
    <h1 data-dojo-type="dojox.mobile.Heading"
        data-dojo-props="label:'My tasks',back:'Back',moveTo:'MainView'">
        <div data-dojo-type="dojox.mobile.ToolBarButton"
            style="float: right;" onClick="getTaskList();">Refresh</div>
    </h1>
    <div data-dojo-type="dojox.mobile.RoundRectList" id="taskItems">
    </div>
    <div id="taskListStatus" class="itemText"></div>
</div>

The Business Process Manager REST API is used to populate the taskItems div tag. The results, returned as a JSON structure, are then parsed and used to dynamically add the task items as new nodes, as shown in Listing 5.

Listing 5. JavaScript function that populates the task list
<script type="text/javascript">
function getTaskList() {
    var xhrArgs = {
        url: getServerBase() + "/rest/bpm/wle/v1/tasks/query/IBM.DEFAULTALLTASKSLIST_75?
        interactionFilter=ASSESS_AND_WORK_ON",
        preventCache : true,
        handleAs: "json",
        user : "admin", /* should be handled differently */
        password : "admin",
        load: function(jsonData) {
            var items = dijit.byId("taskItems");
            items.destroyDescendants();
            if(jsonData.data.size==0) {
                dojo.byId("taskListStatus").innerHTML = "No task waiting";
            } else {
                dojo.byId("taskListStatus").innerHTML = "";
                for(var i=0; i<jsonData.data.size; i++) {
                    var taskItem = jsonData.data.items[i];
                    var item = new dojox.mobile.ListItem({
                        moveTo: "TaskDetailsView",
                        transition: "slide",
                        label: taskItem.NAME,
                        rightText: taskItem.TKIID,
                    });
                    items.addChild(item);
                    item.on("click", function() {getTaskDetails(taskItem.TKIID);});
                }
            }
        },
        error: function(error, ioargs) {
            dojo.byId("taskListStatus").innerHTML = "Bad reply,status:" + 
ioargs.xhr.status + ": reason:" + ioargs.xhr.statusText;
        }
    }
    dojo.byId("taskListStatus").innerHTML = "Loading tasks...";
    var deferred = dojo.xhrGet(xhrArgs);
}
</script>

As you can see at the end of the getTaskList() function, on each new item an event handler is added through the dojo/on API, enabling the further onClick event on each line to be caught so that the right task details page can be displayed. The task details page is built the same way; Listing 6 shows how the REST API is used with the task ID given as a parameter.

Listing 6. Extract of the JavaScript function to load the task details page
var xhrArgs = {
	url: getServerBase() + "/rest/bpm/wle/v1/task/"+taskId+"?parts=all",
	preventCache : true,
	handleAs: "json",
...

Putting it all together

Now that you have seen how the process and the Dojo mobile user interfaces have been built, let’s see how this all works together.

First, you need to launch a new process instance. Navigate from the main view to the Create subscription view, fill in the form, and click the Subscribe button. As a result, the status message should get updated at the end of the form, as shown in Figure 12.

Figure 12. Starting the process from the mobile device
Figure 12. Starting the process from the mobile device

Now, let’s verify that the process was really started and in which step it is waiting. This can be done either through the IBM Process Portal, or through the Inspector in IBM Process Designer, as shown in Figure 13.

Figure 13. The process instance waiting for the task to be completed
Figure 13. The process instance waiting for the task to be completed

The process diagram shows that the process is waiting at step “Medical expertise” (outlined in yellow), the task list shows a new task waiting with ID 705, and the process variables contain your input data that was successfully passed to the process instance. Back to the mobile device, you can return to the main view and navigate to the My tasks view; Figure 14 shows the task added to the list with the right task ID.

Figure 14. Task list
Figure 14. Task list

If you click on the task item, the task details page is displayed and you can decide to accept or reject the case by clicking on the appropriate button (Figure 15).

Figure 15. Task details page
Figure 15. Task details page

Following the acceptance or rejection selection, you can go back to your monitoring view of the process and see that the process instance is completed (Figure 16). Did you think it would be this easy?

Figure 16. The completed process
Figure 16. The completed process

Conclusion

This article illustrated a simple case showing how mobile users can easily connect to and interact with a business process. Using this basic application as a starting point, there are several exciting features that you could build on to enhance the user experience, thanks to Dojo or the Worklight Mobile Platform:

  • Work offline (for example, start a process offline or fill-in a task offline).
  • Use the unified notification API provided by Worklight to send a notification to the user when a new task is assigned.
  • Add key performance indicators to the process model and render them on the mobile device using Dojo charting capabilities.
  • Use the Worklight authentication framework to manage user ID and password to provide simplified authentication.

You can download the sample project presented in this article, including a README file that will help you import the resources into your own test environment.


Download

DescriptionNameSize
Sample application1203_noiret_sources.zip8.3 MB

Resources

Learn

Get products and technologies

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 Business process management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Business process management, WebSphere, Web development
ArticleID=800935
ArticleTitle=Using Dojo to extend business processes to the mobile space
publish-date=03142012