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.

SAPUI5_1.jpg

                                        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.

SAPUI5_2.jpg

                              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.

SAPUI5_3.jpg

                              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.

SAPUI5_4.jpg

               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.

SAPUI5_5.jpg

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.

SAPUI5_6.jpg

                              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.

SAPUI5_7.jpg

                         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.

SAPUI5_8.jpg

                    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.

SAPUI5_9.jpg

               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.

SAPUI5_10.jpg

                         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.

SAPUI5_11.jpg

               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

To report this post you need to login first.

17 Comments

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

  1. Nishant Singh

    Thanks Abidemi for this wonderful blog . I was following the steps mentioned in the blog and was able to deploy all the Process and the UI5 ear components successfully on my SAP Process Orchestration server ( NW 7.4 SP 8 ) . But when the user tries to claim the task by navigating to the link from the UWL, the page does not open up . I get below message on the browser page

    Upon getting this error I had set the “http.baseurl” in NWA and tried again but still no luck . Could please guide what could have gone wrong or is there anything else I could have missed .

    Error_Page.JPG

    Thanks

    Nishant

    (0) 
    1. A. Olatunbosun Post author

      Hi Nishant,

      Thanks for your comment, did you do the following:

      1) Change the default setting of the notificationTask from uwl to bpm_inbox as mentioned in the blog

      2) Maintain the custom calculated value of http.baseurl as http://<server>:<port>

      3) Access your SAP UI5 task from the url: http://<server>:<port>/bpminbox

      With this it should work, if you still have problems let me know.

      Regards,

      Abidemi

      (0) 
      1. Nishant Singh

        Thanks  Abidemi for your response  .

        One thing I would like to add , I am using NWDS 7.3 SP 13 PAT0001 for development/design and only yesterday I came through a SAP note : 2113891 which indicated that NWDS 7.3 versions < SP16 need to manually adjust the code in UI5 project and deploy the UI5 application . So I applied the same today and also followed the steps mentioned by you but I still get the same error .  Not sure what is still missing .

        Thanks

        Nishant

        claim.JPG

        Setting.jpg

        (0) 
        1. A. Olatunbosun Post author

          Hi Nishant,

          Just to confirm, are you on NWDS 7.3 EHP1 SP 13 and not just “NWDS 7.3 SP 13 “?

          You also need to be on EHP1. Your AS Java must also be on the same or higher for deployment.

          Regards,

          Abidemi

          (0) 
          1. Nishant Singh

            Hi Abidemi ,

            Sorry I missed to mention  EHP1 , yes I am using NWDS 7.31 SP8 . Also My current NW Java AS  is on NW 7.4 SP 8 .

            Thanks

            Nishant

            (0) 
            1. Nishant Singh

              Hi Abidemi ,

              I think I may have confused you here . What I wanted to say is I am using NWDS 7.3 EHP1 SP13 PAT0001 for build/design/deploy and the server hosting the BPM and UI5 application is SAP Process Orchestration NW 7.4 SP8 Java AS server .

              Thanks

              Nishant

              (0) 
              1. A. Olatunbosun Post author

                Hi Shank,

                There are some possibilities that can be explored;

                1) Regenerate the UI5 UI from the process.

                2)Redeploy the UI5 ear and the BPM dc

                3) Restart your AS Java after changing some of the parameters.

                Regards,

                Abidemi

                (0) 
                1. Nishant Singh

                  Hi Abidemi ,

                  Thanks a lot. I will do a server or maybe specific service restart after the new parameters which have been set and then create the Process Component and UI5 DCs and deploy again and see if the issue is resolved .

                  Thanks

                  Nishant

                  (0) 
  2. Nishant Singh

    Hi Abidemi ,

    I tried with restarting the server after the parameter changes , and recreated new components for process and UI and deployed again , but still the same result . I am clueless what could have gone wrong . Any further suggestions will be of great help .

    Thanks

    Nishant

    (0) 
    1. A. Olatunbosun Post author

      Hi Nishant,

      My other suggestion is to check the following parameters are set:

      1)http.baseurl: Custom calculated value = http://<hostname>:<port>

      2) http.consumerbaseurl: Custom calculated value= http://<hostname>:<port>

      Regards,

      Abidemi

      (0) 
  3. Lev Kulaev

    Hello Abidemi!

    It’s very interesting blog, thanks. But will it works when SAP UI5 is on HANA system which doesn’t have any DCs?

    And the second question: how it will works with NWDI? In your blog you use local DCs, will it be built by NWDI during transport?

    Regards, Lev

    (0) 
  4. Simon Ahorn

    Hi,

    I’m facing some issues at step i).

    When I switch to the web perspective there is no “dc_sapui5_ear” folder. It seems like it wasn’t generated.

     

    Does anybody else is facing this issue?

    We use a SAP PO 7.5 EHP4

     

    (0) 

Leave a Reply