Integrating SAP UI5 Screen as a BPM Task (Open UI Integration) in 5 Easy Steps NW 7.3 EHP 1
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 :
2. In the ‘Task’ property of the Human Activity, click on the ‘Task’ link as shown to open the Task Properties :
3. In the User Interface Property of the Task, click on ‘Choose’:
4. Now select on ‘Custom Technologies’ and clcik on ‘OK’:
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’ :
*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:
The input and putput parameters we defined earlier should be available in the Input and Output mapping of the Human Activity:
Input Mapping:
Output Mapping:
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.
Hey Siddhant, thank you for this great step-by-step explanation. This really makes it easier for others to configure custom task UIs. Maybe you could not only link to the blog written by Vitaly on the OData Service, but also the whole blog post series: Custom UIs with the BPM OData Service
Best Regards,
Andre
Hi Andre,
Thanks for the response. Thanks for including the blog series too. Will surely add it to the blog.
🙂
-Sid
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 .
Hi Govind,
We are also facing similar situation, Our BPM and UI5 are on different servers. Can you please help us with what you did in order to overcome this issue?
Thanks in advance,
Saili B
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?
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.
Hi Siddhant,
Very useful yet simple to understand the document. Appreciate your efforts in precisely mentioning the steps.
We have a situation wherein out UI5 development is being deployed on ABAP repository and we also have PO system. We wish to use NW BPM offering of this PO for workflow purpose.
User will login on FIORI launchpad where they will have access to my fiori inbox.
We wish to display processes from PO system in this inbox.
It will would of great help if you could help us out here.
Regards,
Saili B.
Hi Siddhant,
Appreciate your efforts in putting up a blog in such a precise and clear way.
We have a situation where UI5 development and BPM are on different servers.
We wish to us NW BPM available in PO.
UI5 development is done using BAS and deployed on on premise system.
User will login through FIORI launchpad and will have access to my inbox tile.
User should be able to see the processes from PO system in this inbox.
It would be really great if you could help us out in this situation.
Regards,
Saili