Modern client-side web frameworks and libraries like SAPUI5 are using REST services to load data from a server. If you want to consume existing business logic from these new web applications, you first need to make them REST-enabled.

 

For standard SAP applications, you can use SAP NetWeaver Gateway. But what about your own composite services built e.g. using the Composite Application Framework (CAF)?

 

In this blog, we will use the Apache Jersey library to expose a CAF Business Object as a RESTful web service.

Deploying Jersey

 

For a description on how to package and deploy the Jersey libraries to the SAP NetWeaver Application Server, please refer to this excellent blog by Werner Steyn.

 

It is recommended to wrap the External Library into its own Enterprise Application, and have it packaged in a separate Software Component so that it can be reused from multiple applications.

 

Don’t forget to remove the access restrictions to the DCs and its public parts, in order to make it available to other applications.

 

Creating a web module DC

 

The Jersey servlet needs a web.xml to be configured and deployed. Create a new web module DC in the software component which holds your CAF project.

Add a DC dependency from the CAF EAR DC to the new web DC so that it is included with the CAF application.

 

Enabling access to the CAF project

 

Since you want to reuse the existing CAF service, you need to be able to reference it from your new web module DC.

In the component properties of the CAF EAR DC, switch to the “Public Parts” tab, select the “client” public part and add permission for your web DC. Repeat this for all other public parts.

 

PP.png

 

Next, switch to the “Permissions” tab and again add permission for the web DC.

 

permissions.png

 

Setting DC dependencies

 

Now, switch to the component properties of your web DC and add the following DC dependencies:

  • caf/core/ear
  • caf/runtime/ear
  • jersey/ear (from the Software Component which contains the Jersey libraries)
  • tc/bl/exception/lib

You can test if everything works by building the CAF application. If the build is failing, check the build log for error messages.

 

Implementing the resource class

 

Now it’s time to actually implement the REST service. All you need is a plain Java class with some annotations. The JNDI name to look up the CAF EJB can be retrieved via the JNDI Browser in NWA.

The GET method simply all employees stored in the respective CAF table. Since Jersey supports POJOs, we can return the Employee object as-is and don’t need to create any wrapper objects.

 

 

package com.sap.demo.cafrest.employee;
import java.util.List;
import javax.naming.InitialContext;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import com.sap.demo.employee.modeled.Employee;
import com.sap.demo.employee.modeled.bonode.employee.employee.EmployeeServiceLocal;
@Path("/employees")
public class EmployeeResource {
      EmployeeServiceLocal employeeService;
      final String JNDI_NAME = "demo.sap.com/employee~ear/LOCAL/com.sap.demo.employee.modeled.bonode.employee.employee.Employee/com.sap.demo.employee.modeled.bonode.employee.employee.EmployeeServiceLocal"; 
      @GET
      @Produces(MediaType.APPLICATION_JSON)
      public List<Employee> getAllEmployees() {
            try {
                  InitialContext jndiContext = new javax.naming.InitialContext();
                  employeeService = (EmployeeServiceLocal) jndiContext.lookup(JNDI_NAME);
                  List<Employee> result = employeeService.findAll();
                  return result;
            } catch (Exception e) {
                  throw new RuntimeException(e);
            }
      }
}

In the code sample above, we only implement the method to get all objects. You can easily implement all CRUD and finder methods in a similar way using the respective annotations for GET, PUT, POST and DELETE. Check the Jersey documentation for more details.

This example uses a CAF business object service, but the same approach also works for application services.

 

Configuring the Jersey servlet

 

Finally, we need to configure the servlet container for Jersey. Open the web.xml of your web DC and add the following lines:

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
      id="WebApp_ID" version="2.5">
      <display-name>CAF REST demo</display-name>
      <servlet>
            <servlet-name>Jersey REST Service</servlet-name>
            <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
            <init-param>
                  <param-name>com.sun.jersey.config.property.packages</param-name>
                  <param-value>org.codehaus.jackson.jaxrs;com.sap.demo.employee.modeled;com.sap.demo.cafrest.employee</param-value>
            </init-param>
            <init-param>
                  <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
                  <param-value>true</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
            <servlet-name>Jersey REST Service</servlet-name>
            <url-pattern>/rest/*</url-pattern>
      </servlet-mapping>
</web-app>

 

Via the parameter com.sun.jersey.api.json.POJOMappingFeature, we tell Jersey to use POJO mapping instead of JAXB annotations.

In the value for com.sun.jersey.config.property.packages, you need to add all Java packages containing the POJOs used in your CAF services. Otherwise the POJO to JSON mapping will not work.

 

Testing the service

 

Deploy the whole CAF application to the server. After deployment, you should be able to call the service from your browser:

 

result.png

 

If you get an error message, check the dev traces in the NWA Log Viewer.

 

Summary

 

Exposing a CAF service via REST requires only a few lines of code. The trickiest part is to make sure you have set all the right permissions and dependencies between the various DCs.

Introduction

 

In part one of this blog, we installed the SAP UI5 toolkit into SAP NetWeaver Developer Studio, created a first sample application and tested it locally using the web app preview.

In this part, we will deploy and run the application on the SAP NetWeaver Java application server.

 

SAPUI5 as part of NetWeaver Java

 

Since EHP1 for SAP NetWeaver 7.3 SP05 (or short 7.31 SP05), the SAP UI5 runtime library are shipped as part of NetWeaver, so you can use it from within your own application. There is no need to include a reference to an external source.

For this guide, we assume that you already have SP05 installed on your system. If not, there are good reasons for upgrading...

 

Download the latest patch for the SAPUI5 software component from the Service Marketplace and deploy it to your system.

The full name of the SC is "SAPUI5 CLIENT RT AS JAVA 7.31":

 

UI5patch.png

 

Note: NW 7.31 SP05 contains SAP UI5 Version 1.6. The next SP will include UI5 Version 1.8.

 

Import the UI5 SCA in NWDS

 

Once you have deployed the SC to your system, you also need to import it into NWDS.

Switch to the "Development Infrastructure" perspective, right-click the development configuration and select "Import SC".

 

import_sc.png

 

Select the .sca file that you have downloaded from SMP.

After the import process is complete, you should see the SAP UI5 SC appearing in your development configuration:

 

sc.png

 

Creating references

 

In order to use the SAP UI5 runtime library from our application, we need to create the respective references on both the software component (SC) level and development component (DC) level.

 

Open the component properties for your software component, switch to the dependencies tab and add a dependency to "UISAPUI5_JAVA".

 

dependency.png

 

Next, open the component properties of the Enterprise Application DC which contains the Web Module DC with your UI5 application.

Switch to the Dependencies tab and add a dependency to the DC "ui/five" within the SC UISAPUI5_JAVA.

 

dc_dependency.png

 

Adapting the sapui5 source location

 

The last thing left to do is to adapt the source path to the UI5 libraries in the index.html file.

In case of NetWeaver Java, the UI5 libraries are available under "/sapui5/resources", so change your index.html file accordingly:

 

 <script src="/sapui5/resources/sap-ui-core.js"
                      id="sap-ui-bootstrap"
                      data-sap-ui-libs="sap.ui.commons"
                      data-sap-ui-theme="sap_goldreflection" >
              </script>

 

Running the application

 

Deploy your DCs to the server and open the app in your favorite browser.

 

app.png

 

Summary

 

In this two-part series, we have seen how you can easily develop UI5 applications and views in the NetWeaver Developer Studio and use them in other NetWeaver-based applications. Due to the open and flexible nature of SAP UI5, it can be easily integrated into existing development landscapes to create appealing user interfaces.

What is SAP UI5?

 

SAP UI5 (or "UI Development Toolkit for HTML5", if you prefer calling it by its official name), is SAP's new HTML5 UI library and client-side MVC framework for building light-weight web UIs. While very flexible and open, it also supports all SAP product standards.

It is also used for new applications developed by SAP (e.g. SAP HCM).

 

The toolset is based on Eclipse, and can therefore be installed into the SAP NetWeaver Developer Studio (NWDS).

In this blog, I'll walk you through the exact steps, from the initial download to the first UI5 application.

 

Downloading the UI toolkit

 

First, make sure you have at SAP NetWeaver Developer Studio 7.3 or higher installed. The UI5 tools will not work with older NWDS versions.

The toolset can be downloaded from the SAP Service Marketplace (SMP).

Go to https://service.sap.com -> SAP Support Portal -> SAP Software Download Center -> Support Packages and Patches -> A - Z index -> N -> UI ADD-ON FOR SAP NETWEAVER -> UI ADD-ON 1.0 FOR NW 7.03 -> Support Package Stack Download. The file that you need is at the bottom of the list: SAPUI5 TOOLS IDE PLUGIN 1.00. Make sure you pick the latest version (currently this is SPS 02).

 

SMP.png

 

Once the download is finished, extract the archive content into a local directory.

 

Installing the plugin

 

In NWDS, go to Help - Install New Software...

Add a new Local Update Site (named "UI5 Tools") and point it to the folder where you have extracted the files before.

 

add_local.png

 

Wait for the installation to finish and then restart NWDS.

 

Creating a first application

 

Since NWDS is using Development Components instead of "plain" Eclipse projects, you can't use the standard "New UI5 Application" wizard directly.

Instead, create a new Development Component of type "Web Module".

 

Some small changes to the project are needed in order to prepare it for UI5. For a regular UI5 application these would normally be done by the New Project wizard, but for a DC project they need to be done manually.

 

Project Nature

 

Edit the .project file in the root folder of the project and add the UI5 nature:

...
<natures>
...
<nature>com.sap.ide.ui5.app.plugin.webappnature</nature>
</natures>
...

 

JavaScript libraries

 

Next, add the JavaScript libraries to the project settings. This is needed for auto-completion while writing JavaScript code.

Open the project properties, and go to JavaScript - Libraries. If you don't see a "JavaScript" entry in the project settings, you might have to turn on "the JavaScript Toolkit" facet first under "Project Facets". Switch to the "Libraries" tab and click on "Add JavaScript Library".

Select the SAP UI5 library and finish the wizard.

 

ui5library.png

 

Java Build path

 

To enable the local web app preview, we need to add the SAP UI5 libraries to the project build path.

Open the projects properties and add the SAPUI5 Core and Server Side Libraries via the "Add Library..."button.

 

buildpath.png

 

 

web.xml

 

Add the following content to the web.xml of your Web Module project.

(Alternatively, you can also copy the web.xml from an application created by the UI5 wizard - see below).

 

<!-- ============================================================== -->
  <!-- UI5 resource servlet used to handle application resources -->
  <!-- ============================================================== -->
  <servlet>
  <display-name>ResourceServlet</display-name>
  <servlet-name>ResourceServlet</servlet-name>
  <servlet-class>com.sap.ui5.resource.ResourceServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>ResourceServlet</servlet-name>
  <url-pattern>/resources/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
  <servlet-name>ResourceServlet</servlet-name>
  <url-pattern>/test-resources/*</url-pattern>
  </servlet-mapping>
  <!-- BEGIN: DEV MODE -->
  <context-param>
  <param-name>com.sap.ui5.resource.DEV_MODE</param-name>
  <param-value>true</param-value>
  </context-param>
  <!-- END: DEV MODE -->
  <!-- ============================================================== -->
  <!-- Cache Control Filter to prevent caching of any resource -->
  <!-- ============================================================== -->
  <filter>
  <display-name>CacheControlFilter</display-name>
  <filter-name>CacheControlFilter</filter-name>
  <filter-class>com.sap.ui5.resource.CacheControlFilter</filter-class>
  </filter>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.html</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.js</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.xml</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.json</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>CacheControlFilter</filter-name>
  <url-pattern>*.css</url-pattern>
  </filter-mapping>
  <!-- ============================================================== -->
  <!-- UI5 proxy servlet -->
  <!-- ============================================================== -->
  <servlet>
  <servlet-name>SimpleProxyServlet</servlet-name>
  <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>SimpleProxyServlet</servlet-name>
  <url-pattern>/proxy/*</url-pattern>
  </servlet-mapping>

 

Creating the view

 

You are now ready to create the actual application content. The easiest way to get started is create a new UI5 application using the wizard and then copy the content into your Web Module DC.

Go to File - New - Other... and select "SAP UI5 Application Development" - Application Project.

Enter a project name and a view name. Once the project is created, open it in the Project Explorer and open the WebContent folder.

You will find an index.html and a sub-folder for the application.

Copy the index.html and the whole application folder into the WebContent folder of your Web Model DC project.

 

copy.png

 

Now let's create some content in the view. Open the *.view.js file and fill the createContent function with the following code:

 

createContent : function(oController) {
   var button = new sap.ui.commons.Button({ "text": "my button" });
   return button;
}

 

Check out the code completion feature:

 

autocomplete.png

 

Running the app

 

Once done, you can test the application locally. Right-click on the index.html and select Run As - Web App Preview.

 

preview.png

 

Summary

 

The SAP UI5 Toolkit works well with the SAP NetWeaver Developer Studio. Only small adjustments are needed due to the Java development component model.

In part 2, we will prepare the application for running on SAP NetWeaver Java.

EhP1 for NetWeaver 7.3 SP05 was released at the end of October. It comes with several enhancements and improvements for Business Process Management and Process Orchestration scenarios.

 

Open UI integration

 

Most notable, you can now use any web UI technology to build task UIs for BPM, for instance the HTML5 toolkit from SAP. Before, user tasks could be linked only to WebDynpro Java, WebDynpro ABAP or Visual Composer composer UIs.

Now, you can enter a relative URL, which is called at runtime to open the task. You can also specify the input and output XSD type of the task.

The task instance ID is passed as a HTTP parameter, so the application can retrieve the task instance data via the BPM Java API.

 

custom_ui.png

 

See below for a sample task UI built in HTML5:

 

Picture1.png

 

Using CSS media queries, task UIs can even be optimized for different devices (mobile, tablet, desktop).

 

Monitoring of BPM actions

 

Since SP04, actions on user tasks and messages received by intermediate message events are processed asynchronously from an action queue. This queue can now be monitored by an administrator.

 

actions.png

 

For instance, messages that have been correlated to a certain process instance (correlation condition is met) but have not yet been consumed (because there is no active token at the intermediate message event) will be listed. In case of an error, the action is retried automatically several times before it finally fails.

 

Export of processes and tasks to spreadsheet

 

You can now export process and task instances to a spreadsheet from NWA. This allows running some advanced queries and filters on the data and creating custom charts.

 

export_spreadsheet.png

 

URL Parameters for Processes and Tasks in NWA

 

The Manage Process and Manage Task applications in NWA can now be parameterized and called from external applications. For instance, in order to display all process instances which are “in progress” and have been started by user “guest”, use the URL

http://<host>:<port>/nwa/bpm-processes?lifecycle=InProgress&user=Guest

 

For a full list of available parameters, please refer to the product documentation.

 

Process Orchestration

 

There is also new functionality for scenarios using the Process Orchestration installation option (joint deployment of NW PI and NW BPM on a single Java system). In these scenarios, PI messages will be sent to/from BPM processes. Using the BPM Log Viewer, you can now check which messages a BPM process now has sent and/or received, or which BPM process has received a certain message.

 

business_log.png

 

Using the various event types, you can also check for messages which have not been correlated or consumed by any BPM process at all.

 

Summary

 

For a full list of changes in SP05 including also other NetWeaver components, please check the relevant release notes.

 

In this post, I’d like to present the different options for building task UIs with SAP NetWeaver BPM and help customers make the right choice for their project.

 

The incumbents

When building user interfaces for your NW BPM process, you have the choice between multiple UI technologies:

 

  • Web Dynpro Java
  • Visual Composer
  • Web Dynpro ABAP (CHIP)
  • Adobe Offline Forms

 

Edited by Moderator: Jocelyn Dart

Please note that as of 7.3 EHP1 SP5 Open Task UI is also available

For further information see Christian's blog

 

http://scn.sap.com/community/bpm/blog/2012/11/05/whats-new-in-netweaver-bpm-731-sp05

 

 

In this post, we will focus on the first three options and ignore the offline forms.

Let’s look at each technology in detail:

 

  1. Web Dynpro Java is a mature and robust framework, which allows developing complex business applications. It has very good tool support and fully supports all SAP product standards like accessibility or globalization. The developer tools are fully integrated into the NetWeaver Developer Studio (NWDS).
  2. Visual Composer (VC in Eclipse) is a tool for rapid development UI composition. Since it doesn’t require any programming skills, it can be also used by non-developers (business experts) to create simple UIs. Although it lacks the full flexibility and power of Web Dynpro, it can be a good option for simple task forms.
  3. Web Dynpro ABAP is very similar to its Java counterpart. If most of the business logic and business data resides in an ABAP system, it could make sense to also implement the UI there. That way, existing functionality like F4 value help can be used. 

 

All three technologies will be supported by SAP until at least 2020.

For a general comparison and recommendation on Web Dynpro Java and Web Dynpro ABAP please also check this wiki page:

http://wiki.sdn.sap.com/wiki/display/BBA/Deciding+Which+SAP+UI+Technology+to+Use

 

 

The new kid on the block

The SAP UI Development Toolkit for HTML5 – better known as SAP UI5 – is a new framework for building web-based and mobile applications, based on HTML5 and JavaScript. While released in beta only in early 2012, it has already raised some buzz in the SAP developer community.

 

Can you use this new technology in NW BPM? The answer is "Yes, you can".

 

With the BPM Java API, which is available since NW 7.3, you can access task instance data and perform task actions.  For more information on how to do this, you can check out this article by Harald Schubert: http://scn.sap.com/docs/DOC-28977.

However, using this approach currently has two caveats:

 

  1. You still need to assign a Web Dynpro or VC component to the task definition, in order to define the task interface.
  2. You need to build your own inbox, since the standard UWL will always open the task UI that is linked to the task definition.

 

We plan to address this in one of the next versions, so that there is better support not only for SAP UI5 but also for other UI technologies like GWT or JSF.

 

Edited by Moderator: Jocelyn Dart

Please note that as of 7.3 EHP1 SP5 the above caveats no longer apply.

For further information see Christian's blog

 

http://scn.sap.com/community/bpm/blog/2012/11/05/whats-new-in-netweaver-bpm-731-sp05

 

Summary

The following table lists UI frameworks from SAP:

 


Web Dynpro Java
VC (Eclipse)Web Dynpro ABAPSAP UI5
Integration in BPM sinceCE 7.11CE 7.2NW 7.3(standalone)
Supported data typesbuilt-in simple typesVC typesString, boolean, INT4CSDL (ODATA)
Custom Input Validationyesnoyesyes
Programming LanguageJava- ABAPJavaScript
Auto-generation from BPMyesyesnono
Integration with BPM nativenativenativevia API
Can show task in UWLyesyesyesno

 

So which technology should you choose? As always, it depends on various factors. Besides the more technical aspects listed in the table above, you should also consider

  • The available set of skills in your organization
  • The end user requirements (occasional users, power user)
  • Supported browser versions
  • Access via mobile devices and tablets
  • Integration into existing application landscape / portals

 

What is your opinion? Do you have experiences in using NW BPM with alternative UI technologies?

Actions

Filter Blog

By author:
By date:
By tag: