Hello Everyone,

This blog, as the title suggests, sheds some light on integrating a UI developed in SAP UI5 as a BPM task. Not necessarily UI5, it can be a UI developed in any other technology which is not predefined in BPM at design-time like, WD Java, WD ABAP, Visual Composer or Adobe Offline Forms.

Other UI technologies like JSP, HTML etc. can also be integrated in this fashion.

Applies to:

NetWeaver 7.3 EHP1 (7.31) onwards.

How to:

1. Double-click on the Human Activity in your BPM Process to open its Properties :

     Task1.jpg

2. In the ‘Task’ property of the Human Activity, click on the ‘Task’ link as shown to open the Task Properties :

/wp-content/uploads/2014/04/task2_434903.jpg

3. In the User Interface Property of the Task, click on ‘Choose’:

/wp-content/uploads/2014/04/task3_434904.png

4. Now select on ‘Custom Technologies’ and clcik on ‘OK’:

/wp-content/uploads/2014/04/task3_434904.png

5. In the next dialog box that opens up, enter the relative URL* of the UI, define the input and output types (mandatory) and define the Fault Types for exception Handling (not mandatory) and click on ‘Finish’ :

/wp-content/uploads/2014/04/task3_434904.png

*Relative URL: If the UI Application is deployed on the same AS Server, eliminating the server details from the URL of the UI will give you the Relative URL.

                        For example: URL of UI : http://<hostname>:<port>/POC_SecondView/index.html, then Relative URL : /POC_SecondView/index.html

Now, the Relative URL of the UI should be seen in the UI property of the task now, which was blank earlier:

/wp-content/uploads/2014/04/task3_434904.png

The input and putput parameters we defined earlier should be available in the Input and Output mapping of the Human Activity:

Input Mapping:

/wp-content/uploads/2014/04/task3_434904.png

Output Mapping:

/wp-content/uploads/2014/04/task3_434904.png

That’s it! You’re Done! 🙂

Note:

As SAP UI5 and other custom technologies do not have a context of their own, we will have to use the BPM “oData Service” to bind the UI data to the BPM Process Context Data.

For more details on the BPM oData service, please refer this article by Vitaly Yarmolik.

For exclusive blog series  on  ‘Custom UIs with the BPM oData Service’, please refer this excellent blog by Andre Backofen.

Hope this blog helps in some way.  Please let me know  in case I have mentioned anything wrong.

Regards,

Sid.

To report this post you need to login first.

5 Comments

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

    1. Govind Turka

      Hi Andre,

      We have a situation where BPM and UI5 applications are dion different servers . According to SAP help , we need to create HTTP destination and give it before relative URL in curly braces . But it is not working. The destination is not getting replaced with actual address at runtime. Please help .

      (0) 
  1. Dominik Espitalier

    Hi Siddhant,

    very nice work with this guide! I have a question regarding the URL, that you have to set so that the task knows which UI it should call. Is there a possibilty to set a dynamic id at the end of the url?

    like this:

    –> /Test_Project/Approve/id

    Because in my project I have set some routes in the component.js which relies on an approver-id. And I want to open a specific ui which depends on the id. Is there a functionality in BPM or do  i have to implement this in UI5?

    (0) 
    1. Siddhant Bhatankar Post author

      I don’t think that is possible as of now, atleast with the latest version of NWDS.

      But there should be a provision in the future versions to atleast store dynamic data in a Data Object which can be set as/appended to the Relative URL, so that such operations can be performed.

      (0) 

Leave a Reply