SAPUI5 Integration into SAP BPM Made Easy

SAPUI5 Integration into SAP BPM Made Easy

Introduction: Previously, integrating to custom UIs into SAP BPM involved the use of the BPM Java API. The ease of integrating custom UIs into SAP BPM offers more possibilities with the introduction of the BPM Odata. Integrating SAPUI5 into a BPM process has become easier with the introduction of the BPM Odata. This article provides a detailed insight on how to execute a human task from a SAP BPM process using the SAPUI5 technology.

Prerequisites: NWDS 7.31 SP13 and above

Generating a SAPUI5 DC from your SAP BPM

After creating a sample BPM process as shown below, perform the following actions to generate the SAPUI5 user interface from within the process:

1. a) Create or import an XSD Schema to be assigned to the data object that will be used to hold the process’s data. In this article, a service interface from SAP PO’s Enterprise Service Repository was imported and assigned to the process.
2. b) Select the human activity “Approve” from the process. In the property section and the Task sub tab; choose the “new” option from the task attribute as indicated by Figure 1.

                                        Figure 1: Creating a new SAPUI5 application from SAP BPM.

c)      A new wizard will start to facilitate the generation of the SAPUI5. Follow the wizard to create a development component for SAPUI5. Name the task as shown in Figure 2.

                              Figure 2: Naming the SAPUI5 Task.

d)      For the attribute UI Technology, select the value “SAPUI5” from the dropdown. In case a development component needs to be created, choose the option new and follow wizard to create a new DC. See Figure 3.

                              Figure 3: Selecting the SAPUI5 Technology.

e)      Follow the wizard until the last step to select the Data Object to be used as the basis to generate the SAPUI5 user interface. Refer to Figure 4.

               Figure 4: Process Context details for generating the SAPUI5 application.

f)      Once 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 5.

Figure 5: Custom SAPUI5 Data types generated.

g)      Open the task folder under the SAP BPM project tree and select the role tab. From there select user(s) from the UME to be assigned to this task as potential owners. See Figure 6.

                              Figure 6: Assigning task potential owner to SAPUI5 for task execution.

h)      From the NWDS tool, switch to the “Web” perspective to view all the files which have been generated for the SAPUI5 DC. Navigate the DC project structure and notice the generated folders, libraries, JSON and index files. An impression of the project tree structure is shown in Figure 7.

                         Figure 7: JavaScript code generated for the SAPUI5  controller

i)      The created SAPUI5 DC will need to be deployed to the SAP PO server as an enterprise archive file. You need to create an EAR DC and add the SAPUI5 as a dependency to it. From Figure 7, you can see an EAR DC named “dc_sapui5_aer”. Figure 8 demonstrates how the dependency to the “dc_sapui5” is created.

                    Figure 8: EAR DC created its dependency to the SAPUI5 DC.

Note: Extra steps need to be taken to ensure that the human task notifications of the BPM are sent to the BPM Inbox. In SAP PO, by default the value for the notificationTask inbox is set to the Universal Worklist (UWL). However, in case you would like the notification to be consumed by the “BPM inbox”, this value will need to be set to “bpm_inbox” instead.

j)      Configure the “notificationTask” inbox settings by navigating through Java System properties of the NetWeaver Administrator (NWA) and set the value – as shown by Figure 9.

               Figure 9: NWA settings for notificationTask from uwl to bpm_inbox

k) It is finally time to build and deploy the 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 and that we previously defined. 

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

The steps described above have highlighted the activities needed to generate a SAPUI5 application from within a SAP BPM process context. In the next steps, we will be performing a test to complete a task from our SAPUI5 application using BPM Inbox. Once an employee triggers an order request from a web client, this data is passed to the BPM process. The manager can then view and complete the task which has been assigned to him/her via the BPM inbox.

Note: The URL of the BPM Inbox to view and complete the task to be consumed by a SAPUI5 application is  http://<hostname>:<port>/bpminbox

The following roles should be assigned to a user to be able to access the bpm inbox:

1. UnifiedInboxUserRole: this role allows the user to view the list of tasks and their details in the BPM inbox.

2. com.sap.bpem.Enduser: enables users to manage and work on the task.

Proceed to the bpm inbox to claim the employee task and fill in the details. Once the employee task is completed, you are able to claim the manager’s task and complete it as shown in Figure 10.

                         Figure 10: BPM Inbox tasks for SAPUI5..

Finally, to complete the task from the SAPUI5 application, open a web browser and enter the URL pattern described above. If the application has been properly deployed by the EAR file, it should be accessible via the browser.

               Figure 11: 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, then complete the task.

In the previous paragraphs, we have been able to discuss the basic steps involved in executing a human task within a 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.

Conclusion: The blog has been able to explicitly highlight the necessary steps to integrate SAP UI5 into a SAP BPM process, so that tasks can be completed from different devices.

Written by: Abidemi Olatunbosun