Technical Articles
Integrate Ariba catalog with custom UI5 application
Overview:
I would like to share my experience of integrating Ariba catalog with custom ui5 application.
Business Requirement:
I am developing a custom Fiori application for Purchase Requisition(PR) creation for one of our prestigious customer. As part of this application, we got a requirement to integrate Ariba catalog with the Fiori application.
Note:
The same functionality is currently being achieved in ME51n using SAP standard add-on integration for Ariba. In ME51n the http session is live and the whole catalog is called within SAPGUI and the listener is waiting for the response from Ariba.
System Details:
Our client using sap NetWeaver Hub Deployment with NW 7.4
Design and Implementation:
Initially tried many options and not able to receive response from Ariba system as its doing http post to the Hook_Url. As HTML5 is not having options to capture http post requests at client side.
Finally, we were able to crack the solution as below (We able to achieve same as ME51n with live Ariba catalog session).
Step by Step Implementation Process:
1.Get the logged in User Ariba configuration details from ECC via gateway service same as ME51n application. This details are mandatory to launch Ariba catalog as per OCI documentation.
Logged in user details to be passed to Ariba:
Code to launch Ariba:
Do form submit to open Ariba catalog in child window:
2.Launch Ariba catalog as child window from Fiori application. This has been implemented by simple HTML document submit by using the details received from ECC. This includes the call back url as custom BSP application in gateway system.
3.Shop the materials from vendors in Ariba system and submit. Ariba POSTs the shopping cart to the Callback URL (BSP Application).
4.BSP application reads the POST data and builds an HTML +JS with the captured data and send this as response to the browser. The dynamically generated HTML+JS will call a method in the parent window (Fiori app) which will close the Ariba window.
Sample code to called from child window (once user clicks submit catalog – after completing Ariba catalog shopping).
Note: BSP application will capture the hook-url call back with the shopping card details and generate array object, which will be passed back to the ui5 application.
5.Now the Fiori application has the Ariba cart data.
Do rest of details capturing to complete PR creation.
Summary:
In a nutshell i was able to connect Ariab catalogs with live session(like ME51n tcode) from sap ui5 application which is deployed into an gateway system.
Hope this will open a lot of integration options for live connections with various other business cases as well.
Please follow this link to know more about the back-end technical details
Credits:
Thanks Ragini and Srikath for your help to make the application possible in UI5.
Hi Rabin,
Very useful information.
nice blog .
Thanks,
Prasad doddi.
HI Team,
Thanks for very nice blog.
We are trying same thing - Opening ARIBA punchout catalog from SAPUI5 app.
I tried following above steps but it is not working with me. Blog does not provide many details such as - How ARIBA URL is passed to open HTML content page. How ARIBA catalog page is created etc.
Can you please guide further on this?
Any assistance on this would be greatly appreciated.
Regards,
Ravi Soni
Hello Ravi,
You shall refer the link for back-end details . Also as mentioned, in the blog step 1 & 2 details how to launch ariba catalog as child window. Here in our scenario we launched ariba catalog as child window .
Rabin
Hi Rabin,
We have a similar requirement. We used BAS to develop the application and tried to post the data back to SAP, but it was unsuccessful, so as you said in your blog
" the approach used is to redirect the catalog to a BSP application (HOOK_URL) that reads the request form fields and return this to FIORI."
Do we need to use a similar approach to BSP for posting data, or do we need to modify the files ( index file etc.) to call the post functionality?
Please suggest.
Dear Rabin,
Detailed and very nice solution. Helps us to explore a new way of integration.
Thanks a lot for sharing the solution steps.
Thanks and Regards,
Sivakumar Arumugam
Hey Rabin,
thanks for he blog.
I have poblems with the encoding. in the debugger the letters Ä, Ö and Ü are displayed incorrectly.
Instead of the letters a black square with a white ? is displayed.
Do you have any ideas? The webshop is using utf-8.
Beste Regards
Hi Mehmet,
I have the same issue with special chars. Have you found a solution?
BR
Oliver
In case somebody has the same problem: at least for my desired punchout catalog, it was important, that when calling the custom form, you add the parameter accept-charset='UTF-8' as an hidden input parameter. also the hook_url parameter should be at the very end.
Best regards,
Oliver