Skip to Content
Author's profile photo Former Member

Use Gateway and SAPUI5 to Connect to External Systems

SAP Gateway has come a long way. It’s actually quite pleasant to develop a quick REST web service these days with it. With the growing presence of Gateway services, the question keeps popping up with our clients on how to connect to non-SAP services. In this blog I’ll show one simple option for using Gateway as a proxy and hosting SAPUI5 application all in one place. Our example is an external contract management application.

You can see here how the application will eventually look (SAPUI5):

Our external web service itself uses XML-based REST services. We developed this quickly to demonstrate this application.

We have two services. One that includes a list of contracts, and one that goes into the details of a contract.

Get a list:

Get a single contract:

Next, in ABAP, create a function module to call these services. The function module should utilize the http client class: if_http_client.

Use this class to make an outbound web service call, and parse the xml and return it to the function module.

It looks like this:

Use the same concept for the function module for the get details call.

Next, jump into Gateway and use transaction SEGW to define your new service. We defined the get list, and get details.

In the service implementation we call a remote rfc which are the functions we defined above:

After activated, you can test out your new OData services:

So now we can connect our SAPUI5 to Gateway just like any other service!

If you haven’t done SAPUI5 in a while, things have really changed. The eclipse add-on is very complex to install, but sure does a great job once you have it. I particularly like the team components which streamline the upload to the BSP. Manually uploading this content was very painful!

Create a new SAPUI5 project in eclipse and check it into your ABAP system as a new BSP. Start with the template that creates the index.html

And include the controller and view:

This guide is really a lot of help if you haven’t done this before:

I created a simple table and set a binding for my get list. I also added an event on a button in the list that creates a dialog popup and gets the details of that contract.

Make sure to set your binding to your collection that matches what you have in gateway: oTable.bindRows(“/ContractCollection”)

Once this is complete, you can go into your BSP and test your application:

It performs very nicely. Clicking on each contract makes another ajax call to the get contract details.

For more demonstrations, please see our work at Mindset Consulting:

You can also follow me (Gavin Quinn) on LinkedIn:

Thanks to Paul Modderman, one of my favorite ABAP gurus who provided some incredible guidance on this topic:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla


      Thanks for sharing..

      I am sure you would have looked into, but the other option would be to call these external WS directly via XML Model or AJAX GET from UI5 instead of adding a Getway layer in between.

      Just a thought.



      Author's profile photo Former Member
      Former Member
      Blog Post Author


      Yes, that is another option, and I would probably start there. I just wanted to give an option to run everything through Gateway. One challenge with using SAPUI5 to call services in different systems, is that you run into cross-domain issues, in particular with older versions of IE. There are other proxying methods that can help with this though too.

      Author's profile photo Syam Babu
      Syam Babu

      Hi Gavin,

      Interesting Blog 🙂



      Author's profile photo Former Member
      Former Member

      Nice blog Gavin.

      One observation - this is only one method of connecting to a particular kind of external web service, and your title suggest it is the sole means of consuming any external service 😏

      What if the service is SOAP or OData? For the latter I'd be looking at using OSCI...

      How to consume an OData service using OData Services Consumption and Integration (OSCI)

      For SOAP, I'd expect to be using a generated ABAP proxy.

      Some visitors to SCN are a bit easily led and just a few wrong key phrases can send them down the wrong path. Several years later, guess who is cleaning up the mess 😉 .



      Author's profile photo Former Member
      Former Member
      Blog Post Author


      Thanks for the comment. I hope it wasn't taken that way, but I just wanted to share one method for using Gateway for all services. Using lighter weight REST services I think is a preference to SOAP, but there are many methods that can be utilized depending on the source of data and scenario.

      Author's profile photo Seyed Ismail
      Seyed Ismail

      If I have a "SUBMIT" button in front end and whenever I click it, it should fetch data from the backend.

      So, How does the interaction between SAP Backend and Eclipse works?

      I know and have to got to know about Gateway System. My only doubt is, How is the interaction between Eclipse and SAP? Like any transport request would be generated? Or Any special code written for "SUBMIT" button to induce data fetching from the backend?

      Yes, I am very basic 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      When you say Eclipse, do you mean the developer tool?

      The submit button is attached to an event handler in Javascript. The event handler will trigger an ajax request from sapui5 back to Gateway. Gateway will disperse this back to it's data source, and eventually return the data back to the ajax call. Does this help?

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Thanks Gavin, Yes, It did. It gave me an overall knowledge that how it works.

      In addition, Can you please send me a step-by-step demo document if you have one.

      Thanks a lot again. So far, I have found such document here Consume NetWeaver Gateway services via SAPUI5 - Part 1, Kindly check whether this is related to what I asked.