With the release of NetWeaver 7.3 the Business Process Management (BPM) application programming interfaces became available, with this API it is possible to access the Processes and Tasks running on NetWeaver 7.3 from your own Java code and build your own User Interface on top of a BPM Process.
As soon as i could download NetWeaver 7.3, I started investigating the BPM API by building a J2EE Web Application to connect to a simple BPM Process. My goal was to build a small demo for the SAP Inside Track Netherlands 2011 and show the possibilities of the BPM API and create a different User Interface instead of the standard Web Dynpro screens that are familiar to us.
Then suddenly I noticed the following blog by stefan.henke : RESTful service for NetWeaver BPM (RESTful service for NetWeaver BPM). This blog describes the BPM RESTful Service hosted on Code Exchange. So instead of writing my own Java code to manage the calls to the BPM API I started using this RESTful Service.
In the next part I will explain how I used this RESTful Service together with jQuery Mobile to create a User Interface which you can run on your own iPhone or other jQuery Mobile compatible device. I will show an example that handles XML requests and responses from the RESTful service. JSON is also possible as mentioned in this blog (Getting started with the RESTful service for NetWeaver BPM), but will not be discussed here.
Prerequisites for building the demo are:
- SAP NetWeaver 7.3 SP4
- RESTful service for NetWeaver BPM available at Code Exchange
- jQuery Mobile
The BPM Process used
As a start I created a simple BPM Process:
It’s a simple Leave Request where an employee submits a leave request and the manager approves or rejects it. You can download the BPM project from the SCA file here. This SCA can be imported in your NetWeaver Developer Studio and deployed to your own NetWeaver 7.3 environment. This BPM Process is just for showing the possibilities of the BPM API. So no actual backend data is stored in SAP HR at the end of the Process. For this BPM process to work on your own system you have to create 2 users (employee and manager) in the SAP UME. With the following roles: +BPEM End User+ and +Every User Core Role+ Before deploying the BPM Process, you attach the two new users as potential owners of the two swimming lanes, so that the tasks will arrive in the right inbox.
BPM RESTful Service
For the BPM RESTful Service I have to give all credits to stefan.henke and christian.loos. They created a Code Exchange Project for it. For more information about the BPM RESTful Service check out the the 2 blogs about the RESTful Service written by Stefan mentioned earlier. I deployed the BPM RESTful API to my own NetWeaver 7.3 Environment as described here.
jQuery Mobile
I created my first iPhone Web Application almost 4 years ago with the iUI Framework and the Composite Application Framework. The iUI web framework was one of the first frameworks available to create Native Look & Feel web applications. This time however I decided to use the very popular jQuery Mobile framework. If you want to read more about jQuery Mobile. I recommend the blogs by john.moy3. That’s where I also got my inspiration for using jQuery Mobile 🙂 A nice thing with jQuery Mobile is that you can create a mobile application consisting of multiple-pages all in one single HTML file.
Login page
First page is the login page:
<div data-role="page" id="login">
<div data-role="header">
<h1>Login</h1>
</div>
<form id="loginForm" action="" method="post">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Start Date:</label>
<input name="user" id="user" type="text" placeholder="User name">
<label for="startdate">End Date:</label>
<input name="password" id="password" type="password" placeholder="Password">
</div>
<input id="loginButton" onclick="login()" type="button" value="Login"></input>
</form>
</div>Clicking the login button will execute a JavaScript. The username and password are hashed with a JavaScript base64 encoding which I got from here. We need this hash later on for access to the BPM RESTful API, which uses Basic Authentication.
Retrieving the tasks
After login the BPM tasks for the logged-in user are retrieved with the following JavaScript code:
$.ajax({
type: 'GET',
url: '/bpm/bpemservices/taskinstances?status=READY&status=RESERVED',
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + authorization)
},
dataType: 'xml',
contentType: 'application/xml',
success: function(xml) {
createListView(xml);
}
});
Here we use the BPM RESTful Service for the first time for retrieving the tasks with the status +Ready+ and +Reserved+. A jQuery HTTP (Ajax) request is used to retrieve and process the result. We put the necessary Authorization in the RequestHeader and assign a function when the response returns successfully. The XML response will be something like this:
With jQuery you can parse this XML and output HTML with jQuery Mobile Lists. So the <ul> list will be filled with <li> elements. See the createListView function in the source code. There is a download link at the end of this blog
<div data-role="page" id="tasks">
<div data-role="header">
<h1>Leave Requests</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true" data-filter="true"></ul>
</div>
</div>
The result will look like this:
Complete the task
When we select a task from the list the final page of the multi-page template is called:
<div data-role="page" id="leave">
<div data-role="header">
<h1>Enter Leave Request</h1>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<select name="leavetype" id="leavetype">
<option>Leave Type:</option>
<option value="Annual">Annual Leave</option>
<option value="Compensation">Compensation Leave</option>
<option value="Sick">Sick Leave</option>
<option value="Maternity">Maternity Leave</option>
</select>
<label for="startdate">Start Date:</label>
<input name="startdate" id="startdate" type="date" data-role="datebox" data-options='{"mode": "calbox"}' placeholder="Start date">
<label for="startdate">End Date:</label>
<input name="enddate" id="enddate" type="date" data-role="datebox" data-options='{"mode": "calbox"}' placeholder="End date">
</div>
<a href="#" id="okButton" data-role="button" data-inline="true" data-theme="b">Save</a>
</div>
This page displays a form where the employee can select his Leave Type and pick a start date and end date. When the Save button is pressed the following 3 actions are executed:
- Retrieve Task output
- Claim Task
- Complete Task
// Get TaskOutput
$.ajax({
type: 'GET',
url: '/bpm/bpemservices/taskinstances/' + id + '/output?schema=true',
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + authorization)
},
dataType: 'xml',
contentType: 'application/xml',
success: function(xml) {
dataObject = parseXML(xml);
claimTask();
completeTask(dataObject);
}
});The result of this call will be:
In the parseXML function this response will be parsed and the values from the submitted form will included in the xml object to each corresponding property element.
Next we claim the task with the following REST call to make the current user the owner of the task.
function claimTask() {
//Claim Task
$.ajax({
type: 'PUT',
url: '/bpm/bpemservices/taskinstances/' + id + '?action=CLAIM',
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + authorization)
},
data: ' '
});
}And finally we complete the task. The xml submitted will look like this:
You can see the <value> elements in the structure which contains the input values from the UI.
This XML string is sent to the BPM RESTful service with action=COMPLETE. See javascript code:
//Complete Task
$.ajax({
type: 'PUT',
url: '/bpm/bpemservices/taskinstances/' + id + '?action=COMPLETE',
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + authorization)
},
data: jsonString,
dataType: 'json',
contentType: 'application/json',
processData: 'false'
});Conclusion
In this blog I showed how you can create a mobile web application by using the new RESTful BPM service. Offcourse this is only one of the many possibilities of creating a different UI on top of your BPM process, you can for instance think about other UI Technologies for instance Flex/.NET/PHP/etc…
All source code used in this blog can be downloaded from here.
- SAP Managed Tags:
18 Comments
