In this blog I want to show you how to use the SAP NetWeaver 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 NetWeaver 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.
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
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.
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.
- Basic Authentication on BPM Rest API. All call to the API need Basic Authentication.
- 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
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:
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.
After the initial configuration I got the message that “SAP Cloud Connector is operational”
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.
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.
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
- Retrieve the right processdefinitionid of the BPM Process by name.
GET: bpm/bpemservices/processdefinitions?vendor=ciber.nl&dcName=leaverequest~bpm&processName=LeaveRequest - Retrieve the processstartid for this BPM Process
GET: bpm/bpemservices/processstartevents?processDefinitionId=<processdefid> - Retrieve the Process Start Data. Used for the data object
GET: bpm/bpemservices/processstartevents/<processstartid> - 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.
- Retrieval of tasks
GET: bpm/bpemservices/taskinstances?status=READY&status=RESERVED - Retrieve approve task data
GET: bpm/bpemservices/taskinstances/<taskid>/input - 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!