Skip to Content

Motivation

In SAP BPM process modeling, you use tasks and assign them to the human activities in your process. The task is executed by a human. The UI component assigned to a task allows the user to access and provide data and to complete that task.

With the UI Task Generation, you can generate tasks and their UI components spending less time and effort compared to implementing the UI application from scratch. Tasks and UI components are generated using the process context that includes the data objects in the process and their data types. Task input and output fields correspond to the selected process context attributes.

The UI Task Generation is able to use SAPUI5 as a technology for the generated UIs. In some cases, generated UIs should be customized and developed further. To support such kind of development, SAPUI5 provides a local preview functionality within the SAP NetWeaver Developer Studio (NWDS). During the development of an SAPUI5 application, this avoids the roundtrip that is usually needed, of redeploying the UI application to the BPM Process Server just for verifying the resulting UI.

This blog post provides a description of how to run an SAPUI5 preview on generated BPM task UIs.

Preparation

Plugin Installation

Firstly, additional software – UI Development Toolkit for HTML5 – should be installed. For this purpose, open NWDS (your IDE), go to Help > Install New Software… and enter the update site corresponding to your IDE version. For NWDS 7.31 SP16, it is https://tools.hana.ondemand.com/luna/. You should see UI Development Toolkit for HTML5 in the list. For UI preview, you only need the UI development toolkit for HTML5 (Developer Edition) option.


Proceed with the plugin installation following the wizard steps. Restart your NWDS.

Test Process

Secondly, we need a process definition. In this document, the simple process definition containing single human activity is used. You should create a new task and generate the UI for this task. Use SAPUI5 technology and create a new Web DC when creating the task.

Enabling new project facet

Then, you need to enable a specific project facet on the Web DC that you used for the UI generation. For this, find the Web DC in the list of your projects, right-click on it and select Properties. Once you see the properties for your project, you should select Project Facets and check SAPUI5 Application option. Accept the change by choosing OK.

/wp-content/uploads/2015/10/1_811779.png

Coding

When you are done with the plugin installation and the project configuration, it is time to create and update the files, needed for the UI preview.

Test folder

Almost all new files (except testIndex.html) related to the UI preview will be located in the test folder. Go to the folder inside WebContent that contains the generated UI code of your task. In the example it is CustomerTaskComponent. Create a new folder under the CustomerTaskComponent folder and call it test.

/wp-content/uploads/2015/10/2_811895.png

Service folder

Create a service folder in the test folder. In the service folder, create the next files:

  • metadata.xml – leave this file empty for now.
  • SAPBPMInputData.json – the contents of the file are:



{
  "d" : {
       "results" : {
            "startTypeINPUT": {
                 "EDM_Key": "1"
            }
        }
  }
}
  • server.js – the contents of the file are attached to this blog post (server.js.txt). You should find the COMPONENT_NAME placeholder in the file and replace it with your actual component name. In the example, it will be CustomerTaskComponent. The snippet looks like this:



// simulate
var sPath = jQuery.sap.getModulePath("CustomerTaskComponent.test.service");
…








testIndex.html

Create a testIndex.html file in the same folder, where the index.html file is located. In the example, it is the CustomerTaskComponent folder. Open the index.html file, copy all its content and paste it into the testIndex.html file. Then, the next modifications should be done in the testIndex.html file:

  1. Replace the src attribute value with “../resources/sap-ui-core.js”.
  2. Replace the second <script> tag contents with the following code snippet:

sap.ui.getCore().attachInit(function () {
            sap.ui.require([
                "COMPONENT_NAME/test/service/server",
                "sap/ui/core/ComponentContainer"
            ], function (server, ComponentContainer) {
                server.init();
                new sap.ui.core.ComponentContainer({
                       name : "COMPONENT_NAME"
                    }).placeAt("content");
            });
});








Replace COMPONENT_NAME with your actual component name. In this example CustomerTaskComponent. Save your changes.

As a result, you should have the testIndex.html file like this:


<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>CustomerTaskComponent</title>
  <script
  id="sap-ui-bootstrap"
  src="../resources/sap-ui-core.js"
  data-sap-ui-theme="sap_goldreflection"
  data-sap-ui-libs="sap.ui.commons,sap.ui.layout"
  data-sap-ui-xx-bindingSyntax="complex"
  data-sap-ui-resourceroots='{"CustomerTaskComponent" : "./" }' >
  </script>
  <script>
              sap.ui.getCore().attachInit(function () {
              sap.ui.require([
                 "CustomerTaskComponent/test/service/server",
                 "sap/ui/core/ComponentContainer"
              ], function (server, ComponentContainer) {
                 server.init();
                 new sap.ui.core.ComponentContainer({
                       name : "CustomerTaskComponent"
                    }).placeAt("content");
                 });
              });
      </script>
  </head>
  <body class="sapUiBody" id="content">
  </body>
</html>


metadata.xml

Let us return to the metadata.xml file that we have created in the service folder. This file depends on the task. Thus, in order to fill this file with the data, we need to start a task.

The next steps should be completed to get the metadata.xml contents:

  1. Deploy the process definition and Web DC that contains the generated UI.
  2. Start the process. Go to BPM Inbox and open the task.
  3. Once the task UI was rendered, open the browser developer tools. If you use Chrome browser, choose F12. In this example, Chrome browser is used.
  4. Open the Network tab of the developer tools. Choose F5 or the refresh button to refresh the UI and see the requests.
  5. Find the $metadata?prefixReservedNames=true request.
  6. Open the request’s details. Open the response./wp-content/uploads/2015/10/3_811918.png
  7. Copy the contents of the response. It should be a valid and well-formed xml document.
  8. Paste the copied metadata into the metadata.xml file located in the test/service folder.
  9. Save your changes.

Component.js

Locate the Component.js file. It should be in the component folder. In the example it is in the CustomerTaskComponent folder. Find the line:


var taskId = jQuery.sap.getUriParameters().get("taskId");




Insert the next code snippet starting from the next line:


//this lines used for the preview only
if (!taskId) {
  taskId = "1";
}




Save your changes.

Running Preview

Once all preparation steps are completed, you can use the preview functionality. Go to your Web DC used for the UI generation, open the WebContent folder. Then go to the component folder and right-click on testIndex.html. Select Run As > Web App Preview. Wait until an embedded browser appears.


The embedded browser will show the URL like http://localhost:<port>/<Web DC>/<Component Name>/testIndex.html.


If the UI is not rendered and all you see is a blank page, you can choose the external browser button on the right of the URL to open the UI in your default system browser. The button looks like this:

/wp-content/uploads/2015/10/4_811936.png

You should see the UI with the random values in the input fields and no pop-ups with error messages. Please keep in mind that the values are generated randomly each time you refresh the page. For the collections, one hundred entries are generated.

You can do further updates to the UI (for example edit message bundle or add new inputs to the view) and refresh the page opened in your browser to see the changes. This saves time as no deployment of Web DC or Process DC is needed to see the changes done at the UI implementation.

Troubleshooting

When running the preview, you might run into one of the following issues.

Could not load task data

You see a pop-up with the error message Could not load task data. The error in the browser console is:


The following problem occurred: HTTP request failed404,Not Found,<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"/>
<title>Error 404 Not Found</title>
</head>
<body>
<h2>HTTP ERROR: 404</h2>
<p>Problem accessing /bpmodata/taskdata.svc/1/SAPBPMInputData('1'). Reason:
<pre>    Not Found</pre></p>
<hr /><i><small>Powered by Jetty://</small></i>




The source of this issue is an incorrect metadata.xml file. You need to take the metadata exactly from the $metadata?prefixReservedNames=true request and not from $metadata. Once you update the metadata.xml file with correct data, the issue should disappear.

Sap is not defined

No UI is visible in the external browser. The error in the browser console is sap is not defined.

The cause of this issue can be missing lines in the web.xml file. This issue depends on your IDE and/or plugin version. To solve the issue, you should update the web.xml file as described below.

Go to your Web DC, WebContent folder. Open the web.xml file from the WEB-INF folder. You should see the file similar to this:


<?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"
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>LocalDevelopment~kdevui~demo.sap.com</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>




This file should be modified to look like the one below. Changes are the code lines between </display-name> and <welcome-file-list> tags):


<?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"
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>LocalDevelopment~kdevui~demo.sap.com</display-name>
   <!-- ============================================== -->
   <!-- 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>
   <!-- BEGIN: test-resources -->
   <!-- test-resources mapping has to be switched off for productive use on a Java server! -->
   <servlet-mapping>
       <servlet-name>ResourceServlet</servlet-name>
       <url-pattern>/test-resources/*</url-pattern>
   </servlet-mapping>
   <!-- END: test-resources -->
   <!-- BEGIN: DEV MODE -->
   <!-- DEV MODE switched off by default and can be switched on during development -->
   <!-- but has to be switched off for productive use on a Java server! -->
   <context-param>
       <param-name>com.sap.ui5.resource.DEV_MODE</param-name>
       <param-value>false</param-value>
   </context-param>
   <!-- END: DEV MODE -->
   <!-- ================================================ -->
   <!-- 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>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>




Save your changes and close the web.xml file. Run the preview again.

If your changes in the web.xml file do not solve the issue and you still see that same error in the browser console, then you need to check if the src attribute in the testIndex.html file is correct and points to the SAPUI5 resources.

To report this post you need to login first.

2 Comments

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

  1. Andre Hofeditz

    Love the preview! It is really a productivity boost. No longer waiting for deployments when developing UIs. Thanks for providing this great how-to guide.

    (0) 

Leave a Reply