Skip to Content

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:

image

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.

image

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 Moy. 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:

  image 

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:        

image

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>


Task.png

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:

Output_xml.png

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:

Submit_xml.png

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.

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

  1. Robin van het Hof
    Great blog! It perfectly showcases the endless possibilities of the RESTful service & jQuery Mobile to develop user-friendly HTML5 web apps.

    I’m sure this will jumpstart our collective creativity! ๐Ÿ˜‰

    Cheers,
    Robin van het Hof

    (0) 
  2. Former Member
    Hi,
    Great blog! Nice illustrative example of an HR process brought to mobile ๐Ÿ™‚
    Didn’t know about iUI (also discovered HighCharts on the way) and wondering why there is no BSP Tag library for HTML5 or iUI?!  ๐Ÿ™‚
    That would really be something to start with for companies which want to enter the mobile world…
    Best regards,
    Guillaume
    (0) 
  3. L. van Hengel Post author
    Hi Everyone,

    Thanks for all the great comments. Much appreciated ๐Ÿ™‚
    I have uploaded the code and sca file to the BPM Rest API Code Exchange Project.

    Cheers,
    Leo

    (0) 
  4. Former Member

    Hello Leo,

    I wanted to ask you about the authentication.

    How exactly is that achieved?

    either with the jquery or i need to create a REST Service for that ?

    Thank you.

    Regards

    Dixit.

    (0) 
    1. Stefan Henke

      Hi Dixit,

      basically you have to set the http header called ‘Authorization’ if you want to use HTTP BASIC authentication. This is also included in Leo´s blog and the attached javascript coding. In the section “Retrieving the tasks”, you can find an example for this. The tricky part here is to create a base64 encoded hash for the user and password which is required by BASIC authentication. Leo is using a dedicated javascript library for this as he metioned.

      Best regards,
      Stefan

      (0) 
      1. L. van Hengel Post author

        Thanks for answer Stefan ๐Ÿ™‚
        I hope that answers your question Dixit. Have a look at the zip file mentioned in the blog to see the full html and javascript.

        Regards,
        Leo

        (0) 
  5. Former Member

    Hello All,

    I tried to run the demo for claim and complete task.

    It does claim the task but for complete task it is giving the “networkrerro 400: bad request”.

    Any suggestion ?

    Thank you and regards,

    Dixit.

    (0) 
    1. L. van Hengel Post author

      Hi Dixit,

      You can check the defaulttrace on your NetWeaver 7.3 environment. It usually contains more information about the error. Another option is to use Firebug and check the Firebug console to see what XML is sent with the PUT command. Check if there is anything wrong with the formatting or try to send the same XML with the RESTClient or SOAPUI and see what happens.

      Regards,
      Leo

      (0) 
  6. Former Member

    Hi leo,

        I am trying to write my own jquery mobile. I can understand what you display in this blog.But when I try to get the source of the RESTful service, it is unavailable now. I wonder if i can get the RESTful service.

    Best regards,

    Aria

    (0) 
    1. Andre Backofen

      Hi Aria,

      if you plan to write a custom application using a RESTful service, the BPM OData Service introduced in the blog post series Custom UIs with the BPM OData Service could be interesting for you. This service is a built-in OData service that enables you to easily build custom task execution UIs with modern web technologies like SAPUI5 or even JQuery.

      Best Regards,

      Andre

      (0) 
    2. Stefan Henke

      Hi Aria,

      the hosting platform Code Exchange has been shutdown some time ago. Thus, the RESTful service for NetWeaver BPM is not available there anymore. Anyways this was only a prototypical implementation which was not intended to be used in a productive environment.

      Andre proposed you to use the new BPM OData Service which comes with NetWeaver BPM. This is also the way I would suggest you.

      Best regards,
      Stefan

      (0) 
      1. Former Member

        Hi Andre&Stefan,

        Sorry for reply late. Your advise is very useful. But after reading the material about BPM OData Service, I find there are some other function that I need,like list tasks. So I return to write my own RESTful service again.

        Luckily, I find this.[http://scn.sap.com/thread/3207854] The advice Stefan proviced in the comments there solve most of my problems.

        Thank you very much.

        Best Regards,

        Aria

        (0) 

Leave a Reply