Integrate Ariba catalog with custom UI5 application

[former_member254395]

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.upadhyay#overview and sri.g4#overview for your help to make the application possible in UI5.