Skip to Content

In this blog I want to show you how to use the SAP HANA Cloud and SAPUI5 and create a cloud application which connects securely with an on-premise SAP NetWeaver BPM system (7.3 or 7.31)

Inspired by all the great blogs about SAP HANA Cloud recently published and some friendly reminders I decided to finally finish my first blog about SAP NetWeaver Cloud. It was on my to-do list and draft version for a very long time…

Last year when the SAP NetWeaver Cloud Beta Program was introduced I decided to join and sign up with the idea to create my Leave Request application in the cloud. After finishing this application came the idea to maybe submit a DemoJam entry for SAP TechEd Madrid. Actually Peter Peshev was the one suggesting I should participate with a SAP NetWeaver Cloud application. Thanks again Peter also for the great support during the beta-program and preparations for DemoJam.

The result: Twan van den Broek and me on stage at SAP TechEd DemoJam with our Garbage Collector SAPUI5 NetWeaver Cloud application.

https://youtube.com/watch?v=L8r3BGlsAcE

On stage at TechEd DemoJam. The ultimate dream of every SAP Developer 🙂

More info and details about our DemoJam entry in a future blog.

My first application in the cloud

The idea I had for my first application is based on my previous blog. Where I showed how to develop a jQuery Mobile application for displaying and approving BPM Tasks with the BPM Rest API. I think this is an ideal application to put in the cloud:

  • No need to open up your NetWeaver 7.3(1) stack to the whole world
  • Secure connection to your On-Premise Backend System with the SAP Cloud Connector
  • Accessible anywhere and from any device

/wp-content/uploads/2013/01/cloudapp_179970.jpg

BPM Process

For the BPM Process I will use my sample project from my previous blog again: a Leave Request process. As mentioned by Matthias Steiner at SAPCodeJam Huizen “Leave Request is the new Hello World!” 😉

This time I used the BPM Process from the document Building UIs with Ruby and Sinatra on NW BPM by Harald Schubert as example. This BPM process can be started by the employee when submitting the Leave Request. An administrator is not necessary to start the process as in my previous blog. This is how it looks now.

/wp-content/uploads/2013/01/leaverequest_179592.jpg

It’s a simple Leave Request where an employee submits a leave request and the manager approves or rejects it and gets a notification when the request is approved.

BPM RESTful API

For connection to this BPM Process I will be using the BPM Rest API again. More information about this service can be found here on Code Exchange and in this blog by Stefan Henke. Because this REST API is running on my on-premise system and is using Basic Authentication I had some challenges to make calls from the SAP NetWeaver Cloud.

  1. Basic Authentication on BPM Rest API. All call to the API need Basic Authentication.
  2. Same origin policy: To make it possible to make calls without having “Same origin policy” issues I created an HttpProxyServlet. All calls from my cloud application are redirect through this servlet.

For the first challenge I developed a simple LoginServlet. This servlet is running on my SAP NetWeaver 7.3 system. This servlet can be executed with parameters username and password and checks against the SAP UME if the supplied information is valid. If not it returns “NOK” as response. If user and password check are valid it returns “OK” with the user role.

LoginServlet running on SAP NetWeaver 7.3

package nl.ciber.login;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sap.security.api.IUser;
import com.sap.security.api.IUserAccount;
import com.sap.security.api.UMFactory;
/**
 * Servlet implementation class LoginValidator
 */
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        boolean result = false;
        String returnValue = null;
        try {
            IUser user = UMFactory.getUserFactory().getUserByLogonID(username);
            if (user != null) {
                IUserAccount account = user.getUserAccounts()[0];
                result = account.checkPassword(password);
                if (result) {
                    String firstname = user.getFirstName();
                    String lastname = user.getLastName();
                    String role = username; // Put portal role here (for now username)
                    returnValue = firstname + " " + lastname + "|" + role;
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (result) {
            response.getWriter().println(returnValue);
        } else {
            response.getWriter().println("NOK");
        }
    }
}

For the second challenge I developed my own ProxyServlet. All requests from SAPUI5 are redirected to this Servlet. This servlet then executes the call serverside to the BPM API running on my on-premise NetWeaver 7.3 system and adds Basic Authentication to the requests. See this diagram for more information. No whiteboard video (like Chris Paine) yet, i will stick with powerpoint for now 😉

/wp-content/uploads/2013/01/sequencediag_179593.jpg

HttpDestinations

Both servlets developed above make connection to the SAP NetWeaver 7.3 system by using Destination APIs from the SAP NetWeaver Cloud Connectivity Service like this:

<resource-ref>
    <res-ref-name>logindest</res-ref-name>
    <res-type>com.sap.core.connectivity.api.http.HttpDestination</res-type>
</resource-ref>
<resource-ref>
    <res-ref-name>bpmdest</res-ref-name>
    <res-type>com.sap.core.connectivity.api.http.HttpDestination</res-type>
</resource-ref>


In the web.xml they are configured and with JNDI lookup you can use them in your code:

Context ctx = new InitialContext();
HttpDestination destination = (HttpDestination) ctx.lookup("java:comp/env/bpmdest");
HttpClient createHttpClient = destination.createHttpClient();


These destinations can be configured on your local SAP NetWeaver Cloud or real SAP NetWeaver Cloud server via Eclipse:

/wp-content/uploads/2013/01/connectivity_179601.png

SAP Cloud Connector

To make a secure connection to your on-premise system the SAP Cloud Connector has to be used.

However there was another challenge. My first NetWeaver 7.3 was running on Windows and the SAP Cloud Connector is currently only available for SUSE Linux. Let’s hope it will be released for other platforms soon.

For my demo I was lucky that exactly at the right time there was the announcement of the new SAP NetWeaver 7.3 Trial for Linux. I downloaded it immediately and installed the SAP Cloud Connector on it. After installing the right rpm packages on the environment I could login to the SAP Cloud Connector and setup my secure connection to the SAP NetWeaver Cloud.

/wp-content/uploads/2013/01/scc_179609.jpg

After the initial configuration I got the message that “SAP Cloud Connector is operational”

/wp-content/uploads/2013/01/scc_succesful_179610.jpg

Next configuration is Access Control to the SAP NetWeaver BPM applications which is on the same machine and use the Ping Test applications for testing connectivity.

/wp-content/uploads/2013/01/accesscontrol_179611.jpg

More information about installation and configuration of the SAP Cloud Connector can be found here.

Note: I am aware that there is a possibility to use Single Sign-On and Identity Federation right now, but at the time of my developments this was not yet available and I am also not sure if this can be used together with SAP Connector. For more info about SAP NetWeaver Cloud Security Tutorial – Single Sign-On and Identity Federation with SAP NetWeaver Identity Management. See this document http://scn.sap.com/docs/DOC-35457

SAPUI5

Final part of my application is the front-end. For this I used the UI Development Toolkit for HTML5 better known as SAPUI5. When installing the Eclipse plug-ins for SAP NetWeaver Cloud the UI Development toolkit is automatically included. This way you can easily create a SAPUI5 application from scratch with wizards and you will get SAPUI5 javascript code-completion.

/wp-content/uploads/2013/01/sapui5app_179628.jpg

My application contains one shell with 3 nested views. As example for my project I used the great blog by John Patterson where he describes how to nest the views in one shell and handle navigation between them.

My application consists of 4 views with their controllers.

  • Shell – the main application frame for the other views
  • Login – Login form
  • Leave – Leave Request form for the employee
  • Approve – Approval inbox and form for the manager

Asynchronous HTTP requests with jQuery

From the SAPUI5 controllers several REST calls are executed for retrieving and submitting data to the LoginServlet and BPM RESTful Service. Here a short overview:


Login view
Behind the loginscreen there is asynchronous HTTP (Ajax) request to the LoginProxyServlet described above

$.ajax({
        type: 'post',
        url: 'LoginProxyServlet',
        data: form,
        dataType: 'text',
        success: function(data) {
            var loginData = $.trim(data);
            if (loginData == "NOK") {
                alert('Login failed! Please try again');
            } else {
                var oView = sap.ui.getCore().byId("view.shell");
                var oCtrl = oView.getController();
                oCtrl.navigateToView(loginData);
            }
        }
});

Leave view
In the controller of the leave view 4 REST call are involved to the BPM API

  1. Retrieve the right processdefinitionid of the BPM Process by name.
    GET: bpm/bpemservices/processdefinitions?vendor=ciber.nl&dcName=leaverequest~bpm&processName=LeaveRequest
  2. Retrieve the processstartid for this BPM Process
    GET: bpm/bpemservices/processstartevents?processDefinitionId=<processdefid>
  3. Retrieve the Process Start Data. Used for the data object
    GET: bpm/bpemservices/processstartevents/<processstartid>
  4. Post the start event with the data object populated with values from the leaverequest form.
    POST: bpm/bpemservices/processstartevents/<processstartid>

Approve view

For the approval screen the following data is retrieved and submitted with the RESTful API.

  1. Retrieval of tasks
    GET:
    bpm/bpemservices/taskinstances?status=READY&status=RESERVED
  2. Retrieve approve task data
    GET: bpm/bpemservices/taskinstances/<taskid>/input
  3. Submit data (Get schema, Claim task, Complete task)
    GET:
    bpm/bpemservices/taskinstances/<taskid>/output?schema=true
    PUT: bpm/bpemservices/taskinstances/<taskid>?action=CLAIM
    PUT: bpm/bpemservices/taskinstances/<taskid>?action=COMPLETE

The final result of this application can be viewed here:

 
The code for this SAP NetWeaver Cloud application can be found on github. In this application the SAPUI5 libraries are not included. For more information about setting up github and maven in eclipse. Check out this blog by Matthias Steiner.

To keep my github project clean I decided to use the general available bootstrap for sapui5. This way you don’t have to include any extra SAPUI5 libraries in your eclipse project. 


<script id="sap-ui-bootstrap"
    type="text/javascript"
  src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-theme="sap_goldreflection"
  data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table">
</script>

Disadvantage is that code completion for SAPUI5 will not work now, but that can be fixed by adding the UI5 project nature. More details in this blog by Christian Loos. about setting SAPUI5 in NWDS/Eclipse.

To run the application locally on your own SAP NetWeaver Cloud environment you can download the project from github. Update the pom file below to match your version of the SDK and set your NW_CLOUD_SDK_PATH environment variable to right location.

<properties>
    <nw.cloud.jdk.version>1.6</nw.cloud.jdk.version>
  <nw.cloud.sdk.version>1.17.0</nw.cloud.sdk.version>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>

SAP NetWeaver 7.31 SP05 and SAPUI5 Inbox

Since SAP NetWeaver 7.31 SP05 it is possible to also use SAPUI5 directly from your BPM application. Instead of using WebDynpro Java, WebDynpro ABAP or Visual Composer screens it is possible to use SAPUI5 for UI Tasks. This way you have direct integration with the tasks and your SAPUI5 front-end. The new SAPUI5 Inbox control is used for retrieving tasks. I almost tried to use this new Inbox for our DemoJam in Madrid but I could not get it working on time….

Looking at the source code in the example I see that relative uri’s are used so I expect to make it work that the SAPUI5 front-end should be hosted on the same SAP NetWeaver 7.31 PO environment. But I am anxious to try it out and discover the possibilities.

Hope you enjoyed this blog and I should not forgot to mention the application shown here is just an example of what is possible by using SAP BPM, SAP NetWeaver Cloud and SAPUI5 and i could not resist to include the fantastic disclaimer I found in Joanna Chan’s latest blog.

Disclaimer: The above code, examples etc. are supplied with no guarantee to them actually being fit for use. Copy at your peril! 🙂

To report this post you need to login first.

18 Comments

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

  1. Chris Paine

    Thanks for sharing this Leo, a great deal of effort went into putting this all together, and it’s great that you are able to share this with us all. 🙂

    I very much like all the links you have to other good content – much appreciated.

    Cheers,

    Chris

    (0) 
  2. Timo Lakner

    Great blog of an end-to-end scenario, Leo.

    Is it possible that you share the ProxyServlet coding with us? We are currently discussing to provide such a proxy generically as part of the platform and have already a POC running for it. Would be interesting to see how others have solved this.

    Greetings, Timo

    (0) 
    1. L. van Hengel Post author

      Thanks Matthias, i am happy as well with the result and yes i have got many ideas for other blogs. Lets hope i can get them out faster in the future 😉

      (0) 
  3. Fred Verheul

    Hi Leo,

    Really great blog you’ve written here! Looks like Chris Paine has already set an example that’s being followed by others, like Susan Keohan said minutes ago 😉 , but that’s definitely not fair to you as you’ve been working for this one for a long time apparently.

    I’ll have to fully digest it later (just as with Chris’s blog posts), but lots of useful info and cool stuff. Agree with Chris on the multitude of links to other good content.

    So it’s no problem it took awhile before you were ready to publish it: it’s been worth the wait! 🙂

    Cheers, Fred

    (0) 
    1. L. van Hengel Post author

      Thanks Fred for the comment. I will check the new blog by Chris about sharing all this cool stuff. Looks like i agree with him 100% 🙂

      (0) 
  4. DJ Adams

    Well written and lots of detail, nice one Leo.

    These are the things I liked the most (random, really, and in no particular order):

    – that you built on the demos, writings and knowledge of others

    – that you struggled, at first, with the SAP Cloud Connector availability because it was only available on Linux. What an ironic change of situation! How I laughed and rejoiced at this, because until recently, it was always the other way around (Linux users were always the last to get any install love) 🙂

    (I also will look more into this Cloud Connector thanks to your post, I’m wondering whether it’s similar to Google’s Secure Data Connector (SDC)

    – that the Cloud Connector’s interface is built in SAPUI5 (it’s everywhere!)

    – that you put your code on Github. I’ve been building up working SAPUI5 examples and snippets (and John Patterson has contributed too) and made them available as a public Github repo ‘sapui5bin’

    One other thing: Code completion. I’ve never actually coded with SAPUI5 in Eclipse – I prefer Sublime Text 2 – but have never missed the code completion features. (Actually ST2 does have some inbuilt code completion features that rely more on analysis of what else is in the file that you’re editing – works well!)

    dj

    (0) 
    1. L. van Hengel Post author

      Thanks DJ for your detailed comment.

      Yes, my Linux skills have also improved  with these nice new Trials SAP made available and i have to say they work great. So if i see a rpm I now what to do 😉

      I just did a quick look at your github repositories. Lots of cool stuff there. I will check out soon.

      Yes, i started without code completion as well, but once your used to it….  although on my older macbook with eclipse the code completion can sometimes be a little slow. I will have a look at ST2.

      Leo

      (0) 
  5. Michael Hardenbol

    Hi Leo.

    Maybe you have to change your blog title to ‘SAP Hana Cloud and BPM Rest API’ 😉 .

    To be more in line with the whole naming change!

    (0) 
  6. John Pawski

    Leo, thanks for the info, I have a question.  What are my options for SAP PO in the Cloud?  Is it with HANA or another option?  If you can point me to a link that would be good.

    (0) 
    1. L. van Hengel Post author

      Hi John,

      What do you want to achieve in the cloud? Integration than you can have look at SAP HANA Cloud Integration SAP HANA Cloud Integration – Roadmap

      For BPM I don’t think there is cloud solution yet.

      Also be beware the used BPM REST API in this blog is not available anymore and not supported by SAP. The current version of BPM support OData services, which makes it much easier to create SAPUI5 screens for your task processing. SeeCustom UIs with the BPM OData Service

      (0) 

Leave a Reply