12.2    Integrating SAPUI5 into an SAP BPM Process

SAPUI5 is a UI technology that leverages the power of HMTL5 and JavaScript to provide a rich user experience. SAPUI5 is more frequently used by SAP in recent times to design robust business applications that can be accessed using standard web browsers, smart devices, tablets, and so on.

Please note that the goal of this section isn’t to teach you how to develop UIs using SAPUI5, but rather to demonstrate how it can be integrated with SAP BPM to improve the user experience in a simple manner.

Note

For more information on working with SAPUI5, refer to the book SAPUI5: The Comprehensive Guide by Christiane Goebels, Denise Nepraunig, and Thilo Seidel (SAP PRESS, 2016, www.sap-press.com/3980).

Let’s start with a very high-level description of some basic SAPUI5 concepts.

12.2.1    SAPUI5 Technology Platform

SAPUI5 is based on JavaScript and open-source jQuery. From an architectural point of view, the SAPUI5 runtime is a client-side HTML5 rendering library with a large set of Rich Internet Application (RIA)-like standards and extension controls. It uses the model-view-controller (MVC) concept and is equipped with a large number of very rich standard UI controls. It also provides a lot of themes that can be adapted with a Theme Designer tool. The libraries that it uses for rendering controls comply with OpenAJAX. SAPUI5 is a modern framework that relies on standards such as jQuery, HTML5, JavaScript, Cascading Style Sheets (CSS), and others, which helps it to better support modern browsers and to enhance the experience with SAP applications. The support for all of these standards makes SAPUI5 platform independent. SAPUI5 can consume data from a variety of sources, such as XML, JavaScript Object Notation (JSON), and OData.

An Eclipse plugin provided by SAP supports developers in creating SAPUI5 applications. To create an SAPUI5 application, the types of UI libraries to be used are dependent on which device and platform this application is intended for. Some of these important libraries and their features are as follows:

• sap.ui.core
  Contains the framework classes, such as Control and Element. It provides some controls, such as HTML for embedding native HTML and the model and data-binding classes.
• sap.ui.commons
  Contains basic controls, such as Button, Label, Image, and Link. More complex controls (e.g., Accordion, DropdownBox, and several controls for menu implementation) are also included. sap.ui.commons also extends to layout controls, such as AbsoluteLayout, MatrixLayout, BorderLayout, and VerticalLayout.
• sap.ui.table
  Contains DataTable, a table type that is available to support an end-user-friendly display and interaction on the table content.
• sap.ui.ux3
  Contains container controls, including Shell, ExAct, Thing Inspector, Feed, and DataSet.

The next section will briefly describe the MVC paradigm.

12.2.2    Model-View-Controller Concept

The MVC paradigm is used by SAP to implement its UI technologies such as Web Dynpro and, more recently, SAPUI5. This concept is also used in the design of SAPUI5 applications. One of the main goals of the MVC pattern is to achieve a separation of concerns between different tiers and layers of a UI application.

MVC provides the important ability to separate users’ interactions from information representation. This is made possible through the capabilities of the three parts of this paradigm (see Figure 12.17):

• Model
  The model layer contains the functional logic of an application. It constitutes the services and data layers of the application.
• View
  The view supports defining and rendering the UI. This is the presentation layer. It retrieves data from the model layer and displays it to the user. The view represents the output of the application to the user.
• Controller
  The controller reacts to view events and user interactions by modifying the view and model layers.

Figure 12.17    The MVC Paradigm Architecture

Ideally, data binding in the UI supports the separation of these three components in such a way that the definition of the UI (view), the data visualized by the application (model), and the code for the business logic for processing the data (controller) is done seamlessly. Separating these elements helps to provide better readability, maintainability, and extensibility. It also allows for making changes to the view without touching the underlying business logic while defining several views of the same data. The MVC approach helps to support the flexibility of working on these different layers independently. Naturally, within the MVC design, views and controllers usually have a 1:1 relationship, but it’s also possible to have controllers without a UI. Such controllers are called application controllers. Views can also be created without controllers. In SAPUI5, a view is an SAPUI5 control and can have or inherit from an SAPUI5 model.

12.2.3    SAPUI5 Components

In building SAPUI5 applications, components form an important part of the architecture. These components constitute reusable parts that can be used in multiple SAPUI5 applications. A typical SAPUI5 application can use multiple components remote to the location where it’s running. This makes development of SAPUI5 components agile, such that components developed by one team can be used by other teams across the board and in different projects. The component model helps in the categorization or delineation of similar parts of the application into a single representation or component. An important advantage of this segmentation is the ease of understanding the structure of an application and the readability of the code as well as ease of maintenance. Technically speaking, the SAPUI5 platform provides two types of components:

• Faceless components
  As the name suggests, these faceless components don’t have a UI and are used for some sort of system–system interaction typified in a service that delivers data from a backend system.
• UI components
  UI components are a screen area or element in the UI. The UI components are the basic building blocks of a UI. A human uses them to interact with the application. They include things such as buttons or shells and their respective settings and metadata.

Both of these types of components are part of the sap.ui.core.Component class.

Note

The sap.ui.core.Component class is the base class for the faceless and UI components. The functionality of a component can be extended by inheriting from the base class and enhancing the required behavior.

The structure of a component can be viewed and defined as a folder. The name assigned to a folder during its creation defines the component name. It contains all optional and required resources that are to be used in the component, except for the required SAPUI5 libraries and child components. A couple of resources relate to the CSS, internationalization files, views, and images. When a component is created, certain files are compulsory, including the following:

• component.js
  This represents the component controller and provides the runtime metadata (properties, aggregation, events) and the component methods.
• component.json
  This is the component descriptor and also contains the design-time metadata. The file isn’t loaded during runtime.

Note that all paths contained within a component are paths relative to the component.js file and not to the index.html file.

12.2.4    Other SAPUI5 Concepts

In addition to SAPUI5 components discussed previously, there are a few others that play important roles in developing an SAPUI5 application. These concepts and how they differ from SAPUI5 components are as follows:

• Composite controls
  Composite controls and SAPUI5 components are similar in the sense that they provide a set of controls behind a single interface. A point of difference is that composite controls can be reused within control development and allow for including existing controls in a complex control, whereas SAPUI5 components are to be reused in application development.
• UI library
  The UI library is the deployable unit around controls. Controls are never deployed standalone but always as part of a control library. Components, however, are self-contained and should not be used to deploy controls.
• Notepad control
  A notepad control can be created with JavaScript on the fly. Notepad controls have all the characteristics of a control.
• Application
  An application has a single URL to start it and groups everything belonging to the application in a deployable unit. In addition, because the knowledge of the required libraries, scripts, and additional style sheets is contained in index.html, this makes it impossible to embed one application into another.

12.2.5    Integration Steps

In the past, creating and consuming a human task from SAP BPM using a custom UI involved the use of the SAP BPM Java application programming interface (API). However, the introduction of SAP BPM OData makes integrating SAPUI5 into an SAP BPM process an easier task. This section will provide a guide for how to execute a human task from an SAP BPM process using SAPUI5 technology.

Prerequisites

To generate a human task using SAPUI5 technology, SAP NetWeaver Developer Studio 7.3 EHP 1 SP 13 and above should be used at a minimum.

To better explain the steps involved in integrating SAPUI5 with SAP BPM, we’ll use a simple SAP BPM process scenario as an example.

Sample SAP Business Process Management Process Scenario

For simplicity’s sake, we’ll keep the sample process scenario used for this exercise very basic because most SAP BPM concepts were explored earlier in Chapter 10 and Chapter 11. The essence of this section is only to focus on a human activity step of a process. Therefore, the SAP BPM process will only consist of the following three step types:

• Start event
• Human activity
• End event

Assume that the process simulates a manager of an organization receiving an order request that he needs to approve. The manager will then be able to complete the task via an SAPUI5 UI. The order request is made by an employee, but that part of the process is excluded from our sample UI generation using SAPUI5.

The BPMN representation of this simple process is presented in Figure 12.18.

Figure 12.18    Sample SAP BPM Process with Human Activity to a Consumer SAPUI5 Application

Generating an SAPUI5 DC from SAP BPM

After completing all other SAP BPM process configuration, perform the following actions to generate the SAPUI5 UI from within the process:

1. Create or import an XSD schema to be assigned to the data object that will be used to hold the process’s data. For this guide, a service interface from SAP PO’s Enterprise Service Repository (ES Repository) was imported and assigned to the process.
2. Select the human activity Approve from the process. In the Property section and the Task subtab, choose the New option from the Task dropdown menu (Figure 12.19).
   

   Figure 12.19    Creating a New SAPUI5 Application from SAP BPM

3. A new wizard will start to facilitate the generation of the SAPUI5 application. Follow the wizard to create a DC for SAPUI5. Name the task as shown in Figure 12.20.
   

   Figure 12.20    Naming the SAPUI5 Task

4. For the UI Technology dropdown menu, select SAPUI5. If a DC needs to be created, choose the New option, and follow the wizard to create a new DC (Figure 12.21).
   

   Figure 12.21    Selecting the SAPUI5 Technology

5. Follow the wizard until the last step to select the data object to be used as the basis to generate the SAPUI5 UI (Figure 12.22).
6. After you click on the Finish button, the SAPUI5 technology generates its own data type from the original data object within the process context. The result is presented in Figure 12.23.
   

   Figure 12.22    Process Context Details for Generating the SAPUI5 Application

   

   Figure 12.23    Custom SAPUI5 Data Types Generated

7. Open the Tasks folder under the SAP BPM project tree, and select the Roles tab. From there, select one or more users from the UME to be assigned to this task as potential owners (Figure 12.24).
   

   Figure 12.24    Assigning a Task’s Potential Owner to SAPUI5 for Task Execution

8. From the SAP NetWeaver Developer Studio tool, switch to the Web perspective to view all the files that have been generated for the SAPUI5 DC. Navigate to the DC project structure, and note the generated folders, libraries, JSON, and index files (Figure 12.25).
   

   Figure 12.25    JavaScript Code Generated for the SAPUI5 Controller

9. The created SAPUI5 DC will need to be deployed to the SAP PO server as an Enterprise Application Archive (EAR) file. You need to create an EAR DC and add the SAPUI5 DC as a dependency to it. In Figure 12.25, you can see an EAR DC named dc_sapui5_ear. Figure 12.26 shows that dc_sapui5 has been added as a dependency to dc_sapui5_ear.
   

   Figure 12.26    Creating Dependency of the EAR DC to the SAPUI5 DC

   Note

   Extra steps need to be taken to ensure that the human task notifications of SAP BPM are sent to the SAP BPM Inbox. In SAP PO, by default, the value for the notification_task_inbox is set to the UWL. However, if you want the notification to be consumed by the SAP BPM Inbox, then this value will need to be set to bpm_inbox instead.

10. Configure the notification_task_ inbox property settings by navigating through the Java system properties of SAP NetWeaver Administrator, and change the default value from uwl to bpm_inbox, as shown in Figure 12.27. Select the notification_task_ inbox property, and click on the Modify button to be allowed to change its value.

It’s finally time to build and deploy the SAP BPM process and the EAR DCs. Building and deploying the EAR DC will automatically perform the same actions for the SAPUI5 DC because of the dependency that exists between them.

After the DCs have been deployed, the SAP BPM process can be started from the Process Repository application in SAP NetWeaver Administrator.

The steps described in this section highlighted the activities needed to generate an SAPUI5 application from within an SAP BPM process context. In the next steps, we’ll perform a test to complete a task from our SAPUI5 application using SAP BPM Inbox. After an employee triggers an order request from a web client, this data is passed to the SAP BPM process. The manager can then view and complete the task that has been assigned to him via the SAP BPM Inbox.

Figure 12.27    SAP NetWeaver Administrator Settings for notificationTask from uwl to bpm_inbox

Note

The URL of the SAP BPM Inbox to view and complete the SAPUI5-based task is http://<hostname>:<port>/bpminbox.

The following roles should be assigned to a user for that user to access the SAP BPM Inbox:

• UnifiedInboxUserRole allows the user to view the list of tasks and their details in the SAP BPM Inbox.
• com.sap.bpem.Enduser enables users to manage and work on the task.

Proceed to the SAP BPM Inbox to claim the employee task and fill in the details. After the employee task is completed, you can claim the manager’s task and complete it, as shown in Figure 12.28.

Figure 12.28    SAP BPM Inbox Tasks for SAPUI5

Finally, to complete the task from the SAPUI5 application, open a web browser, and go to http://<hostname>:<port>/bpminbox. An example of how the final result looks in the browser can be seen in Figure 12.29.

Figure 12.29    Completing a Task from the SAPUI5 Application via the Web Browser

The manager can preview the details filled or change any of the previous values passed into the process by the employee and then complete the task.

In the previous paragraphs, we discussed the basic steps involved in executing a human task within an SAP BPM process using the SAPUI5 technology. Note that the SAPUI5 application generated within the process context can be modified and extended to meet the business and functional requirements desired.

In the next section, we’ll explore alternative UI technologies that can be used in combination with SAP BPM.